javascript - 等待完成一系列 Ajax 请求

Question

我有一个包含文件名的数组，我需要使用 ajax 请求检索所有这些文件并等待它们完成以初始化我的模板。

$.when(req[0],req[1],req[2],req[3],req[4],req[5],req[6],req[7]).done(function(){
    for (var i in arr) 
        Stencil.push(new Platform(importedData[i].cells[0]));                             

    $(".se-pre-con").fadeOut("slow");;
})

如您所见，我固定了要等待的请求数，但这并不好。我如何动态地等待所有这些请求，请求的数量是我的数组的长度。

Answer 1

您可以像这样将 when 应用于数组:

$.when.apply($, req).done(function(){

    for (var i in arr) 
       Stencil.push(new Platform(importedData[i].cells[0]));                             
    $(".se-pre-con").fadeOut("slow");

});

数组必须用 jQuery promises 填充，因此最好使用处理一个文件并返回 promise 并将这些结果存储在数组中的函数的结果。

如果您可以提供有关您对这些文件执行的操作的更多信息，我将更新示例以匹配。

这是一个模拟异步文件处理(使用计时器)的小示例:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/79bp8yw1/

var files = ["file1", "file2", "file3", "file4"];

var req = [];
for (var i = 0; i < files.length; i++){
    req.push(processFile(files[i]));
}

$.when.apply($, req).done(function(){
    $('#body').append("All done");
});

并且虚拟文件处理函数返回一个 promise :

var time = 1000;
function processFile(filename){
    var def = $.Deferred();
    setTimeout( function(){
        $('body').append("File " + filename + "<br/>");
        def.resolve();
    }, time);
    time += 1000;
    return def.promise();
}