Question

我有三个函数需要按顺序运行（然后重复，但我还没有。）所以当第一个函数显示其内容然后离开时，第二个函数将在之后播放并执行同一件事情。然后重复进入第三个功能。我正在使用回调试图实现这一点。

当我只使用两个函数时，这不是问题，但是当我介绍第三个函数时，它会渲染前两个菜单板，然后第三个菜单板会出现，之后它们应该渲染1,2，然后3。

JavaScript for Reference

$(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来创建一个调用Board2的函数，并给出参数Board3，如：

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

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

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

但是，如果你有太多的功能链，使用上面的方法可能不是一个好主意，那么你可以创建一个chainer来做你想要的：

// 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()的文件：

回调功能

如果提供，则动画完成后将触发回调。   这对于将不同的动画串联在一起非常有用   序列。回调不会发送任何参数，但设置为   DOM元素被动画化。如果多个元素是动画的，那么   重要的是要注意每次匹配都会执行一次回调   元素，不是整个动画的一次。

从jQuery 1.6开始，.promise（）方法可以结合使用   使用deferred.done（）方法执行单个回调   当所有匹配元素都完成了它们时，动画作为一个整体   动画（请参阅.promise（）的示例。）

因此，如果动画有超过1个元素匹配，则当前函数中的回调将被多次调用，您可能需要使用doc建议的内容重写函数

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

您可以看到jsfiddle按预期工作。

Answer 2

为什么不直接在slideup函数中调用回调函数。就像这样：

$('#menu-board .board.one .row').slideDown(800).delay(10000).slideUp(800, callback);

如果这不起作用，请告诉我。

这是滑动功能的参考：

http://api.jquery.com/slideup/

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

2 个答案: