在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.