最简单的组合jQuery承诺的方法

Question

在很多情况下，我需要累积多个jQuery承诺(动画或Ajax或"其他")，但我尝试的简单测试没有等待它们全部完成(或其中任何一个):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/j7EL4/2/

function makePromises() {
    $('#box1').animate({
        left: 300
    }, 4000);
    $('#box2').animate({
        left: 300
    }, 1000);
    $('#box3').animate({
        left: 300
    }, 2000);
    $('#box4').animate({
        left: 300
    }, 3000);
    return $('.box').promise();
};
$.when.apply($, makePromises()).then(function(){
    $('.box').addClass("done");
});

最坏的情况是，我希望它等待第一次匹配，然后再将所有的框变成灰色。

为什么不像预期的那样工作?

更新:

现在我知道jQuery正确地组合了多个元素的承诺，我注意到你也可以使用一个空的jQuery对象的承诺来提供一个空的承诺

。

return $().promise();

这是一个很好的早期返回值(例如，当没有动画开始时)。

Answer 1

为什么不像预期的那样工作?

因为apply接受数组作为它的第二个参数，但是你传递给它的是Promise

由于$(".box").promise()返回一个承诺，是解决当所有排队的行动完成，并不是一个数组，你不能使用它与apply那样。

你所需要做的就是直接使用结果:

makePromises().then(/*...*/);

更新小提琴

(A。沃尔夫的代码:

$.when(makePromises()).then(/*...*/);

…