Question

我有一个迭代HTML元素数组的循环。每次迭代都会发出一个GET请求（其url取决于当前元素）并进行一些额外的处理。如果我想表示所有请求都已完成，我该怎么做？

HTML元素的格式为

<td align="left">Item name</td>

这就是我所拥有的：

var url = "http://example.com/page.phtml?item=";
var items = $(itemList).find('table tbody tr td[align=left]');
for (var i = 0; i < items.length; i++) {
    (function (i) {
        var itemName = items[i].innerHTML;
        $.get(url + itemName, function(data) {
            // process some stuff
            console.log("Processing item " + itemName);
        });
    })(i);
}

正如您所看到的，进行GET调用的函数位于闭包中。完成所有请求后，如何使用console.log("DONE")等回调？

Answer 1

您可以使用jQuery的$.when()：

var url = "http://example.com/page.phtml?item=";
var items = $(itemList).find('table tbody tr td[align=left]');
var promises = items.map(function(i, elem) {
    var itemName = items[i].innerHTML;
    return $.get(url + itemName, function(data) {
        // process some stuff
        console.log("Processing item " + itemName);
    });
}).get();
$.when.apply($, promises).done(function() {
    // all promises done here
});

你累积了一个promises数组（这是从$.get()返回的），然后将这个promises数组传递给$.when()，它创建了一个汇总承诺，当所有其他承诺都是解决。

Answer 2

您有两种选择。简单的方法是在回调处理程序中保持计数，然后仅在回调数js等于数组中的项数后执行后续代码。

更昂贵但更有价值的是使用承诺。有很多libs用于使用promises。如果你决定走这条路线，我建议寻找一个能够处理一系列承诺的.all或者当时的功能。

如何在循环中的所有AJAX请求完成后执行回调？

2 个答案: