感谢您深入了解我在这里的误解。我的要求如下:

我有一个 URL 数组。我想同时为每个 URL 发出 AJAX 请求，并在第一个请求完成后立即调用第一个回调。然后，如果第二个请求完成，则调用该回调，依此类推。

选项 1:

for (var i = 0; i < myUrlArray.length; i++) {
    $.ajax({
        url: myUrlArray[i]
    }).done(function(response) {
        // Do something with response
    });
}

显然这行不通，因为无法保证响应将按正确顺序完成。

选项 2:

var promises = [];
for (var i = 0; i < myUrlArray.length; i++) {
    promises.push($.ajax({
        url: myUrlArray[i]
    }));
}
$.when.apply($, promises).then(function() {
    // Do something with each response
});

这应该可行，但缺点是它会等到所有 AJAX 请求完成后，才会触发任何回调。

理想情况下，我应该能够在第一个回调完成后立即调用它，然后链接第二个回调以在收到该响应时执行(或者如果它已经解析则立即执行)，然后是第三个，依此类推。

数组长度是完全可变的，并且可以在任何给定时间包含任意数量的请求，因此仅对回调链进行硬编码不是一种选择。

我的尝试:

var promises = [];
for (var i = 0; i < myUrlArray.length; i++) {
    promises.push($.ajax({
        url: myUrlArray[i] // Add each AJAX Deferred to the promises array
    }));
}
(function handleAJAX() {
    var promise;
    if (promises.length) {
        promise = promises.shift(); // Grab the first one in the stack
        promise.then(function(response) { // Set up 'done' callback
            // Do something with response

            if (promises.length) {
                handleAJAX(); // Move onto the next one
            }
        });
    }
}());

问题在于回调以完全随机的顺序执行!例如，如果我将 'home.html'、'page2.html'、'page3.html' 添加到数组中，则响应的顺序不一定是 'home.html'、'page2.html'、'page3 .html'。

我显然从根本上误解了 promises 的工作方式。非常感谢任何帮助!

干杯

编辑

好吧，现在我更糊涂了。我做了 this JSFiddle一个阵列使用 Alnitak's answer另一个使用 JoeFletch's answer而且它们都没有像我期望的那样工作!谁能看到这里发生了什么？

编辑 2

成功了!根据下面 JoeFletch 的回答，我调整了解决方案如下:

var i, responseArr = [];

for (i = 0; i < myUrlArray.length; i++) {
    responseArr.push('0'); // <-- Add 'unprocessed' flag for each pending request
    (function(ii) {
        $.ajax({
            url: myUrlArray[ii]
        }).done(function(response) {
            responseArr[ii] = response; // <-- Store response in array
        }).fail(function(xhr, status, error) {
            responseArr[ii] = 'ERROR';
        }).always(function(response) {
            for (var iii = 0; iii < responseArr.length; iii++) { // <-- Loop through entire response array from the beginning
                if (responseArr[iii] === '0') {
                    return; // As soon as we hit an 'unprocessed' request, exit loop
                }
                else if (responseArr[iii] !== 'done') {
                    $('#target').append(responseArr[iii]); // <-- Do actual callback DOM append stuff
                    responseArr[iii] = 'done'; // <-- Set 'complete' flag for this request
                }
            }
        });
    }(i)); // <-- pass current value of i into closure to encapsulate
}

TL;DR:我不理解 jQuery promises，没有它们它也能正常工作。 :)

最佳答案

不要忘记，您不需要立即注册回调。

我认为这可行，与您的代码的主要区别在于我使用了.done 而不是.then 并进行了重构几行。

var promises = myUrlArray.map(function(url) {
    return $.ajax({url: url});
});

(function serialize() {
    var def = promises.shift();
    if (def) {
        def.done(function() {
            callback.apply(null, arguments);
            serialize();
        });
    }
})();

关于javascript - jQuery Deferred/Promises 动态数组未按正确顺序执行回调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13296711/