javascript - 等待未知数量的$.get完成，然后刷新页面

Question

我正在运行一段 javascript 来运行 Ajax 调用(以 XML 形式返回)，处理该 XML，然后对 XML 中找到的每个“记录”执行另一个 Ajax 调用(删除记录)，然后一旦所有内容都完成了已完成，刷新页面。

这工作正常，但我无法让 Javascript 等到所有迭代 Ajax 调用完成后再刷新页面。

在刷新页面之前等待所有迭代调用完成的最佳方法是什么？

任何“AVMI_”变量都在其他地方定义。

var x = $.get(AVMI_childDB, {   //******* INITIAL AJAX *******
    act: "API_DoQuery",
    query: AVMI_query, 
    clist: "3",
    includeRids: "1"
});

x.then(function(xml1) {
    console.dirxml(xml1);
    $(xml1).find('record').each(function(){
        var AVMI_record = $(this); 
        var AVMI_childRID = AVMI_record.attr("rid");
        console.log(AVMI_childRID);
        var y = $.get(AVMI_childDB , {   //******* ITERATIVE AJAX CALL ******* 
            act: 'API_DeleteRecord', 
            rid: AVMI_childRID
        });
        y.then(function(xml2) {
            console.dirxml(xml2);
        });
    });
    location.reload();
});

Answer 1

您需要收集在循环中创建的每个 Promise，然后可以使用 $.when() 来了解它们何时全部完成:

var x = $.get(AVMI_childDB, {   //******* INITIAL AJAX *******
    act: "API_DoQuery",
    query: AVMI_query, 
    clist: "3",
    includeRids: "1"
});

x.then(function(xml1) {
    console.dirxml(xml1);
    var promises = [];
    $(xml1).find('record').each(function(){
        var AVMI_record = $(this); 
        var AVMI_childRID = AVMI_record.attr("rid");
        console.log(AVMI_childRID);
        var y = $.get(AVMI_childDB , {   //******* ITERATIVE AJAX CALL ******* 
            act: 'API_DeleteRecord', 
            rid: AVMI_childRID
        }).then(function(xml2) {
            console.dirxml(xml2);
        });
        promises.push(y);
    });
    $.when.apply($, promises).then(function() {
        location.reload();
    })

});

使用 .map() 并让 jQuery 为您收集 promise 可能会更简洁:

var x = $.get(AVMI_childDB, {   //******* INITIAL AJAX *******
    act: "API_DoQuery",
    query: AVMI_query, 
    clist: "3",
    includeRids: "1"
}).then(function(xml1) {
    console.dirxml(xml1);
    var promises = $(xml1).find('record').map(function(){
        var AVMI_record = $(this); 
        var AVMI_childRID = AVMI_record.attr("rid");
        console.log(AVMI_childRID);
        return $.get(AVMI_childDB , {   //******* ITERATIVE AJAX CALL ******* 
            act: 'API_DeleteRecord', 
            rid: AVMI_childRID
        }).then(function(xml2) {
            console.dirxml(xml2);
        });
    }).get();
    $.when.apply($, promises).then(function() {
        location.reload();
    })

});