我如何让一个函数等待，直到所有的jQuery Ajax请求在另一个函数内完成?
简而言之，在执行下一个Ajax请求之前，我需要等待所有Ajax请求都完成。但如何?
当前回答
如果您想知道文档中所有ajax请求何时完成，无论它们有多少，只需使用$。ajaxStop事件如下所示:
$(document).ajaxStop(function () {
// 0 === $.active
});
在这种情况下，您既不需要猜测应用程序中发生了多少请求(这些请求可能在将来完成)，也不需要深入研究函数的复杂逻辑或查找哪些函数正在执行HTTP(S)请求。 美元。这里的ajaxStop也可以绑定到任何HTML节点 认为可以按要求修改。
更新: 如果您想坚持使用ES语法，那么可以使用Promise。所有已知的ajax方法:
Promise.all([ajax1(), ajax2()]).then(() => {
// all requests finished successfully
}).catch(() => {
// all requests finished but one or more failed
})
这里有趣的一点是，它同时适用于Promises和$。ajax请求。
下面是jsFiddle演示。
更新2: 使用async/await语法的最新版本:
try {
const results = await Promise.all([ajax1(), ajax2()])
// do other actions
} catch(ex) { }
其他回答
我的解决方案如下
var request;
...
'services': {
'GetAddressBookData': function() {
//This is the primary service that loads all addressbook records
request = $.ajax({
type: "POST",
url: "Default.aspx/GetAddressBook",
contentType: "application/json;",
dataType: "json"
});
},
...
'apps': {
'AddressBook': {
'data': "",
'Start': function() {
...services.GetAddressBookData();
request.done(function(response) {
trace("ajax successful");
..apps.AddressBook.data = response['d'];
...apps.AddressBook.Filter();
});
request.fail(function(xhr, textStatus, errorThrown) {
trace("ajax failed - " + errorThrown);
});
工作得很顺利。我已经尝试了许多不同的方法，但我发现这是最简单和最可重用的方法。希望能有所帮助
我找到了一个很好的答案，这正是我在寻找的:)
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);
}
});
如果您想知道文档中所有ajax请求何时完成，无论它们有多少，只需使用$。ajaxStop事件如下所示:
$(document).ajaxStop(function () {
// 0 === $.active
});
在这种情况下，您既不需要猜测应用程序中发生了多少请求(这些请求可能在将来完成)，也不需要深入研究函数的复杂逻辑或查找哪些函数正在执行HTTP(S)请求。 美元。这里的ajaxStop也可以绑定到任何HTML节点 认为可以按要求修改。
更新: 如果您想坚持使用ES语法，那么可以使用Promise。所有已知的ajax方法:
Promise.all([ajax1(), ajax2()]).then(() => {
// all requests finished successfully
}).catch(() => {
// all requests finished but one or more failed
})
这里有趣的一点是，它同时适用于Promises和$。ajax请求。
下面是jsFiddle演示。
更新2: 使用async/await语法的最新版本:
try {
const results = await Promise.all([ajax1(), ajax2()])
// do other actions
} catch(ex) { }
在@BBonifield回答的基础上，我写了一个实用函数，这样信号量逻辑就不会分布在所有ajax调用中。
untilAjax是一个实用函数，它在所有ajaxCalls完成后调用回调函数。
ajaxObjs是一个ajax设置对象的数组[http://api.jquery.com/jQuery.ajax/]。
Fn是回调函数
function untilAjax(ajaxObjs, fn) {
if (!ajaxObjs || !fn) {
return;
}
var ajaxCount = ajaxObjs.length,
succ = null;
for (var i = 0; i < ajaxObjs.length; i++) { //append logic to invoke callback function once all the ajax calls are completed, in success handler.
succ = ajaxObjs[i]['success'];
ajaxObjs[i]['success'] = function(data) { //modified success handler
if (succ) {
succ(data);
}
ajaxCount--;
if (ajaxCount == 0) {
fn(); //modify statement suitably if you want 'this' keyword to refer to another object
}
};
$.ajax(ajaxObjs[i]); //make ajax call
succ = null;
};
示例:doSomething函数使用untilAjax。
function doSomething() {
// variable declarations
untilAjax([{
url: 'url2',
dataType: 'json',
success: function(data) {
//do something with success data
}
}, {
url: 'url1',
dataType: 'json',
success: function(data) {
//do something with success data
}
}, {
url: 'url2',
dataType: 'json',
success: function(response) {
//do something with success data
}
}], function() {
// logic after all the calls are completed.
});
}
美元。当不为我工作时，回调(x)而不是返回x工作如下所述:https://stackoverflow.com/a/13455253/10357604
