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

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
});

您积累了一个 promise 数组(这是从 $.get() 返回的内容)，然后将该数组传递给 $.when() 并且它创建了一个摘要 promise ，当所有其他 promise 都得到解决时，该 promise 就会得到解决。