Ожидание множества вызовов Ajax

Question

У меня есть каждый цикл ниже, который проходит через холст div # (не имеет никакого отношения к холсту HTML5), ища элементы, которые необходимо загрузить. В принципе, если элемент имеет целевой атрибут (строка 1), а цель, на которую указывает (target $), не находится в холсте div # (строка 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

Вы можете сделать это, нажав на возвращаемые 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 
});