.each() 循环中的 $.when(...).done(...) 似乎是异步的...？答案

【问题标题】：$.when(...).done(...) in .each()-loop seems to be asynchronous...?.each() 循环中的 $.when(...).done(...) 似乎是异步的...？
【发布时间】：2017-08-03 12:35:49
【问题描述】：

我目前正试图通过重构它以摆脱 AJAX 已弃用的 async: false 选项以供 $.when(...).done(...) 使用。到目前为止，结构如下所示：

$.when($(...).each(function() {
    $.when($.ajax({
        ...
    }),$.ajax({
        ...
    }),$.ajax({
        ...
    })).done(function() {   //function A
        // run as soon as all three AJAX requests in this loop are finished
    });
})).done(function() {   //function B
    // run as soon as $.when().done() of each loop is finished
});

所以基本上我想要一个.each()-loop，它在所有请求完成后异步运行三个独立的 AJAX 请求和函数 A 中的代码。这部分工作到目前为止。

现在的问题是，我希望在 .each()-loop 完成后立即执行函数 B 中的代码，这意味着每个循环的所有 AJAX 请求和函数 A 都应该在函数 B 之前执行到达了。但似乎循环内的$.when(...).done(...) 本身是异步运行的，因此.each()-循环在内部$.when(...).done(...)-函数之前完成，过早执行函数B。有什么办法可以解决这个问题吗？

【问题讨论】：

您可以做的是在循环的每次迭代中返回承诺（或将承诺推送到数组）。您使用$.when.apply(null, <array>) 评估该数组，以便在调用函数 B 之前知道所有 AJAX 调用都已完成。

标签： javascript jquery ajax asynchronous .when

【解决方案1】：

所以我基本上是这样解决的：

var promises = [];
$(...).each(function() {
    var deferred = $.Deferred();
    promises.push(deferred.promise());
    $.when($.ajax({
        ...
    }),$.ajax({
        ...
    }),$.ajax({
        ...
    })).done(function() { //function A
        ...
        deferred.resolve();
    });
});

$.when.apply($, promises).done(function() {   //function B
    ...
});

在每次迭代开始时，我都会初始化一个 Deferred 对象并将其 Promise 对象推送到一个数组中。每次传递函数 A 时，都会解析相应的 Deferred 对象。一旦数组中的每个 Promise 被解析，函数 B 就会运行。所以基本上，函数 B 将在函数 A 每次执行完成后立即运行。对我来说就像一个魅力。

【讨论】：