在for循環完成后，是否可以使用Deferred對象來創建回調？

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的答案可能更合適。 另一種選擇（更簡單，恕我直言）可能是：

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();

工作實例 。 我堅持你的原始代碼（每個效果使用不同的持續時間），但如果你想讓它們具有相同的一個，刪除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上的演示： 回調 ， 延期