jquery - 等待多个延迟对象完成并使用解析值

Question

我正在尝试找出一种方法来等待多个延迟对象并在完成后处理它们，可能就像开始延迟对象的下一组。

我陷入困境，因为以下结果不是预期的结果。我期待结果为

allDone resovled values are 1,2,3

实际结果是

allDone resovled values are 1,2

var dfd1 = new $.Deferred();
var dfd2 = new $.Deferred();
var dfd3 = new $.Deferred(); 
var dfds = [ dfd1, dfd2, dfd3 ]; 
var resolvedValues = [];

$.when.apply($, dfds).done(function() {     
    dfds.forEach(function(dfd){
        console.log("inloop");      
        dfd.promise().done(function(value) {
            resolvedValues.push(value);         
        });     
    });
    console.log("allDone resovled values are" + resolvedValues);
})

dfd1.resolve(1);
dfd2.resolve(2);
dfd3.resolve(3);

Answer 1

要了解原因，请参阅下文。但你把它弄得太复杂了。 :-) 您从 when 获得的最终 promise 的回调为您提供解析值作为参数:

$.when.apply($, dfds).done(function(a, b, c) {
    // Here, a is 1, b is 2, c is 3
    // Or you can access them on `arguments`
})

实例:

var dfd1 = new $.Deferred();
var dfd2 = new $.Deferred();
var dfd3 = new $.Deferred(); 
var dfds = [ dfd1, dfd2, dfd3 ]; 
var resolvedValues = [];

$.when.apply($, dfds).done(function() {
    // Use a trick to turn `arguments` into a real array
    var a = Array.prototype.slice.call(arguments);
    // Show what we got
    console.log("allDone: " + a.join(", "));
})

dfd1.resolve(1);
dfd2.resolve(2);
dfd3.resolve(3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<小时/>

旁注:我假设您正在故意处理数组。如果您需要等待固定数量的 Promise，只需使用更简单的形式

$.when(dfd1, dfd2, dfd3).then(function(a, b, c) {
    // ...
});

<小时/>

这就是为什么你会得到非常奇怪的结果:jQuery 的 Deferred/Promise 对象有一个问题，因为它们困惑:当您对它们调用done时，您不知道您的回调将同步执行还是异步执行嗯>。这是一个严重的缺陷，也是真正的 Promises/A+ 实现所不具备的缺陷(回调始终是异步的)。

如果 promise 尚未解决，jQuery 将异步调用回调。但如果未解析，它会同步调用它:

var d1 = $.Deferred();
d1.done(function() {
    console.log("I'm called asynchronously");
});
d1.resolve();

var d2 = $.Deferred();
d2.resolve();
d2.done(function() {
    console.log("I'm called synchronously");
});

因此，您的代码中发生的情况是，when 触发的整个 done 回调在 done 期间被触发> 对最后一个已解决的 Promise 进行回调 (dfd3)。由于只有在 done 回调完成之后，promise 才会被标记为已解决，因此当您的代码运行时，dfd1 和 dfd2 已解决，但 dfd3 仍在解决过程中。因此，您的内部回调对于 dfd1 和 dfd2 是同步调用的，而对于 dfd3 则是异步调用。因此，您在 dfd3 返回值被推送到数组之前输出结果。