等待多个Ajax调用

我有一个下面的每个循环，通过div＃canvas（与HTML5的canvas无关）寻找必须加载的元素。 基本上，如果一个元素有一个目标属性（第1行）并且指向的目标（目标$）不在div＃canvas（第6行）中，则启动一个Ajax $ .post请求（第7行）以使缺少的目标进入从服务器并将其添加到div＃canvas。

$("#canvas .active[target]").each(function() { this$ = $(this); targetName = this$.attr('target'); target$ = $('div[name=' + targetName + ']'); if (target$.length == 0) { $.post('loadData.php', { fileName : targetName + '.xml' },function(xml) { canvasData$ = $(xml).find("canvasData"); $('#canvas').prepend(canvasData$); }); } }); 

当所有这些缺失的目标都已加载时，我想发出一个Ajax请求，将所有div#canvas发送到服务器。 那个电话看起来像这样：

 Status$.load('writePage.php', { pageName: pageName, seg1: seg1, canvas: canvasOuterHTML, seg2: seg2 }); 

有人建议最好的方法来阻止对writePage的最后调用，直到所有丢失的目标读取完成为止？

谢谢。

Answer 1

使用$ .when

 var array = []; $("#canvas .active[target]").each(function() { this$ = $(this); targetName = this$.attr('target'); target$ = $('div[name=' + targetName + ']'); if (target$.length == 0) { var ajax = $.post('loadData.php', { fileName : targetName + '.xml' },function(xml) { canvasData$ = $(xml).find("canvasData"); $('#canvas').prepend(canvasData$); }); array.push(ajax) } }); $.when.apply($, array).done(function(){ //do something }) 

Answer 2

您可以通过将返回的延迟推送到数组并使用$.when ：

 var xhrs = []; $("#canvas .active[target]").each(function() { var targetName = this.getAttribute('target'), target = $('div[name="' + targetName + '"]'); if (!target.length) { var xhr = $.post('loadData.php', { fileName : targetName + '.xml' },function(xml) { var canvasData = $(xml).find("canvasData"); $('#canvas').prepend(canvasData); }); xhrs.push(xhr) } }); $.when.apply($, xhrs).then(function() { // do something when all request have completed });