javascript – jQuery Deferred / Promises动态数组没有以正确的顺序执行回调

感谢任何有关我在这里误解的内容的见解.我的要求如下：

我有一系列的网址.我想同时为每个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’,’page3 html的”.

我显然从根本上误解了承诺的工作方式.任何帮助感激不尽！

干杯

编辑

好的,现在我更加困惑了.我使用Alnitak’s answer使用一个阵列制作了this JSFiddle,使用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的承诺,让它在没有它们的情况下工作.

asynchronous

javascript – jQuery Deferred / Promises动态数组没有以正确的顺序执行回调

相关推荐