Question

我有一个for循环，它在每个li中消失，我想要做的是等到最后一个li完全淡入然后继续使用类似于回调的代码但是我不确定如何实现这个？我以为我可以使用Deferred对象？

JS

  var newArray = [3,2,6,4,0,1,5];
    for (var i = 0; i < newArray.length; i++) {
      var dfd = $.Deferred();
      $(this).eq(newArray[i]).fadeIn(i * 500);
      dfd.resolve();
      //.. continue with callback code??
    }

Answer 1

您可以使用$.when：通过将所有fadeIn次调用中的Deferreds传递给它，您可以注册一个只有在完成所有这些操作后才能执行的回调：

var deferreds = [];
for (var i = 0; i < newArray.length; i++) {
    var dfd = $(this).eq(newArray[i]).fadeIn(i * 500);
    deferreds.push(dfd);
}
$.when.apply($, deferreds).then(function() { ... });

jsFiddle的工作示例。请注意，您可以将fadeIn的返回值用作Deferred。

更新，因为您希望每个fadeIn仅在>最后一个结束后开始，Bergi's answer可能更合适。另一种选择（更简单，恕我直言）可能是：

var i = 0; function f() { if ( i < newArray.length ) { $(this).eq(newArray[i]).fadeIn(i * 500, f); i++; } else { // Your "done" callback, if any } } f();

工作example。我坚持使用原始代码（每个效果使用不同的持续时间），但如果您希望所有效果都相同，请删除i *并使用500。

Answer 2

我不认为Deferreds在这里会有很大的帮助。当然，你可以为jQuery实例上的每个[effect]队列获得一个.promise()，并且由于这个方法，你甚至可以将jQuery对象直接传递到$.when，但我认为是一个回调链 - 并且用于连续动画你需要一些链 - 可以更容易做到：

function chainedFadeIn($el, order, callback) {
    if (!order.length)
        return callback();
    $el.eq(order.shift()).fadeIn(500, function() {
        chainedFadeIn($el, order, callback); // notice we removed the first element
    }); 
}
chainedFadeIn($(this), [3,2,6,4,0,1,5], function() {
    // do something
});

Promise的替代版本：

function getFadeInChain($el, order) {
    if (!order.length)
        return order; // or anything else
    return $el
      .eq(order.shift())
      .fadeIn(500)
      .promise()
      .then(getFadeInChain.bind(null, $el, order));
}
getFadeInChain($(this), [3,2,6,4,0,1,5]).done(function() {
    // do something
});

jsfiddle.net上的演示：callbacks，Deferred

在for循环完成后，是否可以使用Deferred对象来创建回调？

2 个答案: