等待多個Ajax調用

Question

我在下面的每個循環都會經過div＃canvas（與HTML5的畫布無關）尋找必須加載的元素。基本上，如果一個元素具有目標屬性（第1行），並且指向target（target $）的目標不在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

使用$。當

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

你可以做，通過推動返回deferreds到一個數組中，並使用$.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 
});