多个Ajax调用等待最后一个加载，然后执行 [英] multiple ajax calls wait for last one to load, then execute
问题描述
我在同一时间运行多个AJAX的查询，我希望他们等待最后一回，然后在所有的Ajax调用运行成功处理程序。对于一个简单的例子，考虑：
I have multiple ajax queries running at the same time, and I want them to wait for the last one to return, and then run the success handler on all of the ajax calls. For a simplified example, consider:
$.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
让我们说，所有的请求在同一时间被发送过。因为它们是同步的，它们将返回在不同的时间。比方说，一个请求需要100毫秒返回，其他请求需要3000毫秒返回。我显然不知道哪一个会第一个或最后返回。它们都更新以某种方式在DOM和欲在一个更新显示给观看者一次全部这些变化。如何做到这一点？
Let's say that all of the requests are sent off at the same time. As they are asynchronous, they will return at different times. Let's say one request takes 100ms to return and the other request takes 3000 ms to return. I obviously don't know which one will return first or last. They all update the DOM in some manner and I want those changes shown to the viewer all at once on one update. How do I do this?
最好的，我能想到的是data1和data2中保存为全局变量。然后有计数一个返回成功每当计数器变量。然后，在计数器== TOTAL_NUM_REQUESTS调用像updateAll（）的函数，然后通过所有的全局变量的运行，并把他们，他们需要去。但这似乎凌乱和容易出错。此外，这将是一个很大的全局变量。
The best I can think of is to save data1 and data2 as global variables. And then have a counter variable that counts every time a success is returned. Then, upon counter==TOTAL_NUM_REQUESTS call a function like updateAll(), then runs through all of the global variables and puts them where they need to go. But this seems messy and prone to errors. Plus that would be a lot of global variables.
我的理想是想拥有成功的处理程序睡在返回，然后在我的指望所有的人都为返回的情况下，发送唤醒消息给所有的人，他们可以继续执行。这似乎是最干净的，但我不知道这样的javascriptland任何功能。
What I ideally want is to have the success handlers sleep upon returning, and then on my condition of counting all of them as returned, send wake up messages to all of them and they can resume executing. This seems the cleanest, but I'm not aware of any functionality like this in javascriptland.
没有任何人有任何华而不实的想法呢？
Does anybody have any slick ideas for this?
答案更新
感谢李下面，我能得到一个解决方案。我的解决方案看起来类似于他的下文。我建异步被分配到$就调用变量列表。最初，这些Ajax调用成功处理程序仍在调用，所以我把他们赶走，把他们在那是另一个函数随后调用这个在块我写的。
Thanks to Lee below, I was able to get a solution. My solution looked similar to his below. I build a list of async variables that were assigned to the $.ajax call. Initially the success handler of those ajax calls were still being called, so I removed them and put them in another function that was to be subsequently called by this when block I wrote. I passed results in to the function like this:
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 ....
}
};
的参数对象采取了一些工作来弄清楚它是什么。这是一个二维数组（名单列表）。重新$ P $第一索引psented对应于给定ajax请求返回的对象。它的似乎的是为了，但它是最好的让你的服务器返回的东西，你可以寻找并据此写的if / else块。然后，在给定的元素，似乎有内的列表3的元素。从服务器返回的第一个是价值，也就是你想要的。二是始终是一个字符串成功，您可以presumably使用，以检查是否调用工作。而在该列表中的第三个元素似乎是最初的要求（虽然我不知道）。这是没有用的我。
The arguments object took a little work to figure out what it was. It was a 2d array (list of lists). The first index represented the returned object corresponding to a given ajax request. It seems to be in order, but it would be best to have your server return something that you can look for and write an if/else block accordingly. Then, in that given element, there appears to be 3 elements within that list. The first being the value that was returned from the server, ie what you want. The second was always a string success, which you can presumably use to check if the call worked. And the third element in that list seems to be the initial request (though I'm not sure). This was of no use to me.
无论如何，我希望这可以帮助别人的未来。并再次感谢李点我在正确的方向。
Anyway, I hope this helps somebody in the future. And thanks again to Lee to point me in the correct direction.
推荐答案
使用jQuery的$。当（）函数来运行东西时，所有的Ajax调用完成：
Use the jQuery $.when() function to run something when all the ajax calls finish:
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调用，您可以使用'应用'是这样的：
If you have a bunch of ajax calls you can use 'apply' like this:
var results = [];
results.push(async1);
results.push(async2);
... for all the results ...
$.when.apply(this, results).done(function() {
... use 'arguments' array to get results ...
};
这篇关于多个Ajax调用等待最后一个加载，然后执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
