javascript - 如何在循环之后使用循环内进行的 ajax 调用的结果？

Question

我读过一些有关延迟和 promise 的内容，但我仍然不知道如何管理它。

for(...){//we don't know the number of ajax calls
   $.ajax({...});
}

if(all the ajax call we made are done){...}

重点是我需要保留“ajax.async = true”。

Answer 1

传统方式:

解决此问题的传统方法是将 Promise 添加到数组中，然后使用 $.when.apply 一起评估它们

var promise = [];
for (var i = 0; i < 6; i++){
    promise.push(delay(10-i, $('#' + i)));
}
$.when.apply($, promise).done(function(){
    alert("All done");
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/rgj0bx95/1/

使用返回值:

当您想要保留这些值时，您可以使用 arguments 数组访问它们:

var promise = [];
for (var i = 0; i < 6; i++){
    promise.push(delay(6-i, $('#' + i)));
}
$.when.apply($, promise).done(function(){
    $('body').append("All done!");
    for (var i = 0; i < arguments.length; i++){
        $('body').append(arguments[i]).append("<br/>");
    }
});

示例:

以下示例使用一个返回 promise 的简单函数，并使用计时器来模拟 ajax 调用。它清楚地表明建议有效，即使 promise 以“随机”顺序完成(仅用于演示):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/rgj0bx95/5/

注释:

• 这些值按照调用的顺序返回，而不是按照完成的顺序。

其他方法

我发现的小技巧:您可以与 $.when 并行链接 Promise，而不必使用 Promise 数组:

var promise;   // Undefined also means a resolved promise to $.when
for(...){//we don't know the number of ajax calls
   promise = $.when(promise, $.ajax({...}));
}
promise.done(function(){
   alert("All done");
});

注释:

• 在看到有人使用 promise =promise.then(newpromise) 按顺序链式 promise 后，我想出了这个问题
• 缺点是它会在幕后创建额外的 Promise 对象，并且最后传递的任何参数都不是很有用(因为它们递归地嵌套在其他对象内)。如果不需要参数，则简短。

您将在下面的 fiddle 中注意到结果是嵌套的，并且按照您想要的相反顺序排列。同样，只有当您不想要 promise 的结果时，此技术才有用(这通常用于并行操作)。

摘要:$.when 技术仅在您不关心结果值时才有用。

JSFiddle: http://jsfiddle.net/TrueBlueAussie/rgj0bx95/9/