jquery – 多个ajax调用等待最后一个加载,然后执行

我同时运行多个ajax查询,我希望他们等待最后一个返回,然后在所有的ajax调用上运行成功处理程序.为简化示例,请考虑：

$.ajax({//ajax call 1
    url:page1.PHP,success: function(data1){
        //do something with data1
    }
});

....

$.ajax({//ajax call 2
    url:page2.PHP,success: function(data2){
        //do something with data2
    }
});
//consider more than just two concurrent requests

假设所有的请求都是同时发送的.由于它们是异步的,它们将在不同的时间返回.假设一个请求返回100ms,另一个请求需要3000ms才能返回.我显然不知道哪一个会先回到最后.他们都以某种方式更新DOM,并且我希望在一次更新时同时向查看器显示这些更改.我该如何做？

我可以想到的最好的方法是将data1和data2保存为全局变量.然后有一个计数器变量,每次返回成功时都会计数.然后,在计数器== TOTAL_NUM_REQUESTS调用一个像updateall()这样的函数,然后运行所有的全局变量并将它们放在他们需要去的地方.但这似乎凌乱而且容易出错.加上这将是很多全局变量.

我最理想的是让成功处理程序在返回时睡觉,然后在我计算所有这些返回的条件下,发送唤醒消息给所有的人,他们可以恢复执行.这似乎是最干净的,但是我不知道在这个javascriptland这样的任何功能.

有人有这个想法吗？

回答更新

感谢下面的李,我得到了一个解决方案.我的解决方案看起来类似于他的下面.我建立一个分配给$.ajax调用的异步变量列表.最初,这些ajax调用的成功处理程序仍然被调用,所以我删除它们,并将它们放在另一个函数中,当我写入块时,这个函数随后被调用.我将结果传递给这样的功能：

var results = [];
results.push(async1);
results.push(async2);
... for all the results ...

$.when.apply(this,results).done(function() {
   for(var i=0;i<arguments.length;i++){
     dataobject=arguments[i][0]
     if(dataobject.varIoUsattribute)
       mySuccessHandlerFirstGuy(dataobject)
     else if(dataobject.anotherattribute)
       mySuccessHandlerSecondGuy(dataobject)
       //etc ....
   }
};

争论对象采取了一些工作来弄清楚它是什么.它是一个2d数组(列表列表).第一个索引表示与给定的ajax请求对应的返回对象.这似乎是按顺序的,但最好让你的服务器返回一些你可以查找并相应地写一个if / else块.然后,在该给定的元素中,该列表中似乎有3个元素.第一个是从服务器返回的值,即你想要的.第二个总是一个字符串的成功,您可以用它来检查该通话是否有效.而该列表中的第三个元素似乎是初始请求(尽管我不确定).这对我来说没有用.

无论如何,我希望这有助于未来的人.再次感谢李向我指出正确的方向.

解决方法

当所有ajax调用完成时,使用jQuery $.when()函数来运行某些东西：

jQuery.when docs

var async1 = $.ajax({//ajax call 1
    url:page1.PHP,success: function(data1){
        //do something with data1
    }
});

....

var async2 = $.ajax({//ajax call 2
    url:page2.PHP,success: function(data2){
        //do something with data2
    }
});

$.when(async2,async1).done(function(result2,result1) {
    ... do this when both are successful ...
});

补充回答问题：

如果你有一堆ajax电话,你可以使用’apply’这样：

var results = [];
results.push(async1);
results.push(async2);
... for all the results ...

$.when.apply(this,results).done(function() {
    ... use 'arguments' array to get results ...
});

原文地址：https://www.jb51.cc/jquery/180153.html