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的承诺,让它在没有它们的情况下工作.