Question

我有一个下面的每个循环，它通过div＃canvas（与HTML5的画布无关）寻找必须加载的元素。基本上，如果一个元素有一个目标属性（第1行）并且指向（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

使用$ .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
});

等待多个Ajax调用

2 个答案: