等到所有jQuery Ajax请求完成？
我如何让一个函数等到所有jQuery Ajax请求在另一个函数内完成？
简而言之，在执行下一步之前，我需要等待所有的Ajax请求完成。 但是如何？
jQuery现在为此定义了一个when函数。
它接受任意数量的Deferred对象作为参数，并在它们全部解析时执行一个函数。
这意味着，如果你想发起（例如）四个Ajax请求，那么当他们完成时执行一个动作，你可以做这样的事情：
$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
// the code here will be executed when all four ajax requests resolve.
// a1, a2, a3 and a4 are lists of length 3 containing the response text,
// status, and jqXHR object for each of the four ajax calls respectively.
});
function ajax1() {
// NOTE: This function must return the value
// from calling the $.ajax() method.
return $.ajax({
url: "someUrl",
dataType: "json",
data: yourJsonData,
...
});
}
在我看来，它使得语法清晰明了，避免了涉及任何全局变量，如ajaxStart和ajaxStop，这些变量在页面开发时可能会产生不需要的副作用。
如果你事先不知道需要等待多少个ajax参数（即你想使用可变数量的参数），它仍然可以完成，但只是有点棘手。 请参阅将Deferreds数组传递给$ .when（）（也可能是jQuery，当使用可变数量的参数进行故障排除时）。
如果您需要对ajax脚本等故障模式进行更深入的控制，则可以保存.when()返回的对象 - 这是一个包含所有原始ajax查询的jQuery Promise对象。 您可以调用.fail() .then()或.fail()来添加详细的成功/失败处理程序。
如果您希望等待文档中的所有ajax请求完成，则无论它们有多少个，都可以这样使用$.ajaxStop事件：
$(document).ajaxStop(function () {
// 0 === $.active
});
在这种情况下，不需要猜测将来可能完成的应用程序中有多少个请求。 在某些情况下，ajax请求可能是函数内部逻辑的一部分，它可能非常复杂（例如调用其他函数），在这种情况下，您可能不会等到函数完成其整个逻辑，而是只等待ajax部分来完成。
$.ajaxStop在这里也可以绑定到你认为可能被ajax修改的任何HTML节点。
这个处理程序的目的再次是知道何时没有活动的 ajax不清除或重置某些东西。
PS如果你不介意使用ES6语法，那么你可以使用Promise.all来获得已知的ajax方法。 例：
Promise.all([ajax1(), ajax2()]).then(() => {
// all requests finished successfully
}).catch(() => {
// all requests finished but one or more failed
})
这里有一个有趣的地方是， Promises和$.ajax请求都可以工作。 这是jsFiddle展示最后一个。
我通过gnarf我的自我找到了一个很好的答案，这正是我一直在寻找的:)
jQuery ajaxQueue
//This handles the queues
(function($) {
var ajaxQueue = $({});
$.ajaxQueue = function(ajaxOpts) {
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next) {
ajaxOpts.complete = function() {
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
})(jQuery);
然后你可以像下面这样向队列添加一个ajax请求：
$.ajaxQueue({
url: 'page.php',
data: {id: 1},
type: 'POST',
success: function(data) {
$('#status').html(data);
}
});