等到所有多个异步ajax调用完成

Question

您好，我有多个ajax调用，我想做的是异步触发所有ajax，然后等到它们全部完成后再处理返回的数据。 我尝试使用$ .when，但无济于事。 这是我的代码：

//form_identifier_list is my flag to get the multiple forms in my html page
function test(form_identifier_list){
    var deffereds = [];

    $.each(form_identifier_list, function(key,value){
        var this_form = $(this).parents('.ajaxed_form');
        deffereds.push( $.post($(this_form).attr("action"), $(this_form).serializeForm()) );
    });

    $.when.apply($, deffereds).done(function(){
        //how to output response obj?? i tried console.log(data) to no avail
    }).fail(function(){

    }).always(function(){

    });
}

我还注意到我的Ajax请求没有响应（已在浏览器上验证了响应）。

有没有一种方法可以使多个ajax调用异步触发，然后等到它们全部完成然后访问数据？

谢谢

Answer 1

在when的jquery页面上，有一个部分显示：

在将多个Deferred对象传递给jQuery.when（）的情况下，该方法从新的“主” Deferred对象返回Promise，该对象跟踪已传递的所有Deferred的聚合状态。

在ajax页面上也有这个

从jQuery 1.5开始，由$ .ajax（）返回的jqXHR对象实现Promise接口

因此，我们可以将ajax的返回值分配给变量，然后将这些变量传递给.when 。

为了稍微扩展.when页面上给出的示例并集成任意数量的ajax调用，您可以执行以下操作：

var ajaxes = [];
for(var i=0; i<10; i++) {
    ajaxes.push($.ajax('a.php', {data: {t: i}}));
}
$.when.apply($, ajaxes)
    .done(function(){
        for(var i=0;i<arguments.length; i++) {
            $('#output').append(arguments[i] + "<br>");
        };
    });

如果您知道已知数量的ajax调用，它将变得更简单...您可以执行以下操作：

var a1 = $.ajax(...);
var a2 = $.ajax(...);
var a3 = $.ajax(...);
$.when(a1,a2,a3).done(function(o1, o2, o3) {
  $('#output').append(o1).append(o2).append(o3);
});

第一个示例基本上是在做同样的事情。

Answer 2

可以异步调用多个JavaScript函数（例如Ajax函数），等待每个函数完成，然后使用setInterval继续（例如访问数据）。

考虑三个JavaScript函数（i = 0,1,2）。 每个功能执行相同数量的操作（10）。 系统启动（T_0）后，每个功能都有一个开始（T_（3i + 2）或〖T〗_2，〖T〗_5和〖T〗 8），该操作执行十次（T （3i + 3）或〖T〗_3，〖T〗_6和〖T〗 9）和结尾（T （3i + 4）或〖T〗_4，〖T〗_7和〖T〗_10）。 当功能准备好开始时，功能可以按任何顺序启动。 每个功能执行十次操作。 当每个功能完成其操作时，系统将继续（T_1），并且可以再次执行这三个功能。

图1：用于同步三个函数调用的Petri Net模型

setInterval执行的函数执行以下操作：

1. 选择要执行的（ajax）函数，然后执行该函数。 例如，图1中的T_3，T_6和〖T〗_9中的每一个都可以表示对被调用十次的（ajax）函数的函数调用。
2. 如果每个（ajax）函数均已完成其任务，则该函数将继续并清除间隔对象。

考虑以下示例代码片段：

 var s1=false, s2=false, s3=false; // a1 (an Ajax function) sets s1 to true if it is finished function a1() { …} // a2 (an Ajax function) sets s2 to true if it is finished function a2() {…} // a3 (an Ajax function) sets s3 to true if it is finished function a3() {…} // fcon is the function to execute when a1, a2 and a3 has finished. function fcon() {…} function myFunction() { var af = [], i; If (s1) af[af.length] = 1; If (s2) af[af.length] = 2; If (s3) af[af.length] = 3; If (af.length==0) { fcon(); clearInterval(ai); ai = undefined; } else { i = Math.round( (af.length-1)*Math.random()); switch(af[i]) { case 1: a1(); break; case 2: a2(); break; case 3: a3(); break; default: break; } } } var ai = setInterval(“myFunction()”, 1000); 

[此答案具有PDF版本，其图形是动态且交互式的。]

Answer 3

我想建议你一些肮脏的东西（：

var counter=0;
$.ajax(success:function(){counter++})
$.ajax(success:function(){counter++})
$.ajax(success:function(){counter++})
$.ajax(success:function(){counter++})
$.ajax(success:function(){counter++})

var interval = setInterval(function(){
 If(counter===5){
   // fire event to elaborate data
   // clear interval
 }
})