javascript - 嵌套嵌套函数以按顺序运行

Question

我想按顺序运行三个函数(然后重复，但我还没有做到这一点。)因此，当第一个函数显示其内容然后离开时，第二个函数将随后播放并执行一样的东西。然后重复到第三个函数。我正在使用回调来尝试实现此目的。

当我只使用两个函数时，这不是问题，但是当我引入第三个函数时，它会渲染前两个菜单板，然后第三个函数出现，此时它们应该渲染 1、2，然后3.

JavaScript 引用

$(document).ready(function(){

        Board1 = function(callback){
            $('#menu-board .board.one .row').slideDown(800).delay(10000).slideUp(800, function(){
                callback();
            });
        }
        Board2 = function(callback){
            $('#menu-board .board.two .row').slideDown(800).delay(10000).slideUp(800, function(){
                callback();
            });
        }
        Board3 = function(){
            $('#menu-board .board.three .row').slideDown(800).delay(10000).slideUp(800);
        }

        Board1(Board2(Board3)); 

});

感谢任何帮助。谢谢。

Answer 1

Board1(Board2(Board3));

等于:

var res = Board2(Board3);
Board1(res);

所以它不会像你期望的那样，它只是开始执行Board2，然后启动Board1，所以Board3只是保证在Board2之后执行，而Board1的顺序与Board2和Board3无关。

您可以使用 .bind 创建一个函数，通过给定参数 Board3 调用 Board2，如下所示:

Board1(Board2.bind(null, Board3)); 

或者只是将它们包装在另一个函数中:

Board1(function() {
    Board2(Board3);
}); 

但是，如果您有太多要链接的函数，使用上面的方法可能不是一个好主意，那么您可以创建一个链接器来执行您想要的操作:

// This function will accept a sequnce of functions in array, execute them in order, and call the done callback when all is complete.
var chain = function(sequences, done) {
  // Manage the current index, and total items that would be called.
  var idx = 0, length = sequences.length;
  var caller = function() {
    // When all functions in sequence is called, call final callback to notify user
    // you may have to check if done is a function or not.
    if (idx === length) {
      if (typeof done === 'function') {
        done();
      }
      return;
    }
    // Get the next function to call.
    var currentTarget = sequences[idx];
    // Pass caller to the target function, so when the function completes and call the callback
    // the caller can takeover and start to call next function in sequence.
    currentTarget(caller);
    ++idx;
  };

  caller();
};


// Create some test cases.
var sequence = [], i;
for (i = 0; i < 10; ++i) {
    // Create some functions that will display some text after 1 sec when it get called.
    sequence[i] = (function(index) {
        return function(cb) {
            setTimeout(function() {
                var div = document.createElement('div');
                div.innerHTML = 'Index is: ' + index;
                document.body.appendChild(div);
                cb();
            }, 1000);
        };
    }(i));
}

// Demo.
chain(sequence, function() {
    document.body.appendChild(document.createTextNode("All done."));
});

通过上面的 chain 函数，您现在可以将其用作 chain([Board1, Board2, Board3])，即使您有一个许多函数的序列。

加:

来自.slideUp()的文档:

Callback Function

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

As of jQuery 1.6, the .promise() method can be used in conjunction with the deferred.done() method to execute a single callback for the animation as a whole when all matching elements have completed their animations ( See the example for .promise() ).

因此，如果有超过 1 个元素与动画匹配，当前函数中的回调将被多次调用，您可能必须按照文档的建议重写函数

 Board1 = function(callback){
     $('#menu-board .board.one .row').slideDown(800).delay(1000).slideUp(800).promise().done(callback);
 }

您可以看到jsfiddle正如您所期望的那样工作。