我如何让一个函数等待，直到所有的jQuery Ajax请求在另一个函数内完成?
简而言之，在执行下一个Ajax请求之前，我需要等待所有Ajax请求都完成。但如何?
当前回答
我的解决方案如下
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);
});
工作得很顺利。我已经尝试了许多不同的方法，但我发现这是最简单和最可重用的方法。希望能有所帮助
其他回答
我的解决方案如下
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);
});
工作得很顺利。我已经尝试了许多不同的方法，但我发现这是最简单和最可重用的方法。希望能有所帮助
美元。当不为我工作时，回调(x)而不是返回x工作如下所述:https://stackoverflow.com/a/13455253/10357604
下面的解决方案适用于我使用$when
$.when(master.GetStateByName(stateName)).done(function(response) {
if (response) {
}
});
GetStateByName: function(stateName) {
return $.ajax({
type: 'POST',
url: getStatesByName + '?stateName=' + stateName,
async: false,
});
}
如果从头开始，我强烈建议使用$.when()。
尽管这个问题有超过一百万个答案，但我仍然没有找到任何对我的情况有用的答案。假设您必须处理现有的代码库，已经进行了一些ajax调用，并且不想引入承诺的复杂性和/或重做整个事情。
我们可以很容易地利用jQuery的.data， .on和.trigger函数，这些函数一直是jQuery的一部分。
Codepen
我的解决方案的优点是:
显然回调依赖于什么 函数triggerNowOrOnLoaded并不关心数据是否已经加载或我们仍在等待它 将其插入现有代码非常容易
$(function() { // wait for posts to be loaded triggerNowOrOnLoaded("posts", function() { var $body = $("body"); var posts = $body.data("posts"); $body.append("<div>Posts: " + posts.length + "</div>"); }); // some ajax requests $.getJSON("https://jsonplaceholder.typicode.com/posts", function(data) { $("body").data("posts", data).trigger("posts"); }); // doesn't matter if the `triggerNowOrOnLoaded` is called after or before the actual requests $.getJSON("https://jsonplaceholder.typicode.com/users", function(data) { $("body").data("users", data).trigger("users"); }); // wait for both types triggerNowOrOnLoaded(["posts", "users"], function() { var $body = $("body"); var posts = $body.data("posts"); var users = $body.data("users"); $body.append("<div>Posts: " + posts.length + " and Users: " + users.length + "</div>"); }); // works even if everything has already loaded! setTimeout(function() { // triggers immediately since users have been already loaded triggerNowOrOnLoaded("users", function() { var $body = $("body"); var users = $body.data("users"); $body.append("<div>Delayed Users: " + users.length + "</div>"); }); }, 2000); // 2 seconds }); // helper function function triggerNowOrOnLoaded(types, callback) { types = $.isArray(types) ? types : [types]; var $body = $("body"); var waitForTypes = []; $.each(types, function(i, type) { if (typeof $body.data(type) === 'undefined') { waitForTypes.push(type); } }); var isDataReady = waitForTypes.length === 0; if (isDataReady) { callback(); return; } // wait for the last type and run this function again for the rest of the types var waitFor = waitForTypes.pop(); $body.on(waitFor, function() { // remove event handler - we only want the stuff triggered once $body.off(waitFor); triggerNowOrOnLoaded(waitForTypes, callback); }); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body>Hi!</body>
jQuery允许您指定是否希望ajax请求是异步的。您可以简单地使ajax请求同步，然后其余的代码直到它们返回才执行。
例如:
jQuery.ajax({
async: false,
//code
});
