Подождите, пока все запросы jQuery Ajax не будут выполнены?
Как заставить функцию ждать, пока все запросы jQuery Ajax не будут выполнены внутри другой функции?
короче говоря, мне нужно дождаться всех запросов Ajax, прежде чем я выполню следующий. Но как?
19 ответов
jQuery теперь определяет когда функция для этой цели.
Он принимает любое количество отложенных объектов в качестве аргументов и выполняет функцию, когда все они разрешаются.
это означает, что если вы хотите инициировать (например) четыре запроса 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 вам нужно ждать (т. е. вы хотите использовать переменное количество аргументов), это все равно можно сделать, но немного сложнее. См.передать массив отложений в $.когда() (и, возможно,С помощью jQuery .при устранении неполадок с переменным числом аргументов).
Если вам нужен более глубокий контроль над режимы отказа сценариев ajax и т. д. вы можете сохранить объект, возвращенный .when()
- это jQuery обещание объект, охватывающий все исходные запросы ajax. Вы можете позвонить .then()
или .fail()
на нем, чтобы добавить подробные обработчики успеха / отказа.
если вы хотите дождаться завершения всех запросов ajax в вашем документе, независимо от того, сколько из них существует, просто используйте $.ajaxStop
событие таким образом:
$(document).ajaxStop(function () {
// 0 === $.active
});
в этом случае нет необходимости угадывать, сколько запросов может быть в приложении, которое может закончиться в будущем. В некоторых случаях ajax-запросы могут быть частью внутренней логики функции, которая может быть довольно сложной (например, вызов других функций), и в этом случае вы можете не ждать, пока функция выполняется со всей своей логикой, а не только ждем ajax
часть, чтобы закончить.
$.ajaxStop
здесь также можно привязать к любому HTML
узел, который вы думаете, может быть изменен на ajax
.
опять же цель этого обработчика-знать, когда нет активный ajax
не очистить или сбросить что-то.
P. S. Если вы не возражаете, используя синтаксис 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 демонстрация последнего.
нашел хороший ответ by 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);
}
});
Примечание: в приведенных выше ответах используются функции, которые не существовали во время написания этого ответа. Я рекомендую использовать jQuery.when()
вместо этих подходов, но я оставлю ответ для исторических целей.
-
вы, вероятно, могли бы обойтись простым счетным семафором, хотя то, как вы его реализуете, будет зависеть от вашего кода. Простой пример был бы примерно таким...
var semaphore = 0, // counting semaphore for ajax requests
all_queued = false; // bool indicator to account for instances where the first request might finish before the second even starts
semaphore++;
$.get('ajax/test1.html', function(data) {
semaphore--;
if (all_queued && semaphore === 0) {
// process your custom stuff here
}
});
semaphore++;
$.get('ajax/test2.html', function(data) {
semaphore--;
if (all_queued && semaphore === 0) {
// process your custom stuff here
}
});
semaphore++;
$.get('ajax/test3.html', function(data) {
semaphore--;
if (all_queued && semaphore === 0) {
// process your custom stuff here
}
});
semaphore++;
$.get('ajax/test4.html', function(data) {
semaphore--;
if (all_queued && semaphore === 0) {
// process your custom stuff here
}
});
// now that all ajax requests are queued up, switch the bool to indicate it
all_queued = true;
Если вы хотите, чтобы это работало как и {async: false}, но вы не хотели блокировать браузер, вы могли бы выполнить то же самое с очередью jQuery.
var $queue = $("<div/>");
$queue.queue(function(){
$.get('ajax/test1.html', function(data) {
$queue.dequeue();
});
}).queue(function(){
$.get('ajax/test2.html', function(data) {
$queue.dequeue();
});
}).queue(function(){
$.get('ajax/test3.html', function(data) {
$queue.dequeue();
});
}).queue(function(){
$.get('ajax/test4.html', function(data) {
$queue.dequeue();
});
});
использовать ajaxStop
событие.
например, предположим, что у вас есть загрузка ... сообщение при получении 100 запросов ajax, и вы хотите скрыть это сообщение после загрузки.
из jQuery doc:
$("#loading").ajaxStop(function() {
$(this).hide();
});
обратите внимание, что он будет ждать всех запросов ajax, выполняемых на этой странице.
небольшое обходное решение-это что-то вроде этого:
// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
counter++;
if( counter >= ajaxCalls ) {
// When all ajax calls has been done
// Do something like hide waiting images, or any else function call
$('*').css('cursor', 'auto');
}
};
var loadPersons = function() {
// Show waiting image, or something else
$('*').css('cursor', 'wait');
var url = global.ctx + '/loadPersons';
$.getJSON(url, function(data) {
// Fun things
})
.complete(function() { **ajaxCallComplete();** });
};
var loadCountries = function() {
// Do things
var url = global.ctx + '/loadCountries';
$.getJSON(url, function(data) {
// Travels
})
.complete(function() { **ajaxCallComplete();** });
};
var loadCities = function() {
// Do things
var url = global.ctx + '/loadCities';
$.getJSON(url, function(data) {
// Travels
})
.complete(function() { **ajaxCallComplete();** });
};
$(document).ready(function(){
loadPersons();
loadCountries();
loadCities();
});
Надежда может быть полезна...
javascript основан на событиях, поэтому вы никогда не должны ждать, скорее установить крючки / обратные вызовы
вы, вероятно, можете просто использовать методы success / complete С помощью jQuery.ajax
или вы можете использовать .ajaxComplete :
$('.log').ajaxComplete(function(e, xhr, settings) {
if (settings.url == 'ajax/test.html') {
$(this).text('Triggered ajaxComplete handler.');
//and you can do whatever other processing here, including calling another function...
}
});
хотя вы должны опубликовать псевдокод того, как ваш(ы) ajax-запрос(ы) вызывается (являются), чтобы быть более точным...
jQuery позволяет указать, хотите ли вы, чтобы запрос ajax был асинхронным или нет. Вы можете просто сделать запросы ajax синхронными, а затем остальная часть кода не будет выполняться до их возвращения.
например:
jQuery.ajax({
async: false,
//code
});
также вы можете использовать асинхронность.js.
Я думаю, что это лучше, чем $.когда вы можете объединить все виды асинхронного вызова, который не поддерживает обещания из коробки, такие как таймауты, вызовы SqlLite и т. д. и не только запросы ajax.
на основе ответа @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.
});
}
я настоятельно рекомендую использовать $.когда() если вы начинаете с нуля.
хотя этот вопрос имеет более миллиона ответов, я все еще не нашел ничего полезного для моего дела. Предположим, вам нужно иметь дело с существующей кодовой базой, уже делая некоторые вызовы ajax и не хотите вводить сложность обещаний и/или переделывать все это.
мы можем легко воспользоваться jQuery .data
, .on
и .trigger
функции, которые были часть jQuery с тех пор навсегда.
хороший материал о моем решении:
очевидно, что обратный вызов точно зависит от того
функции
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>
$.when
не работает для меня, callback(x)
вместо return x
работал, как описано здесь:https://stackoverflow.com/a/13455253/10357604
Если вам нужно что-то простое; один раз и сделал обратный вызов
//multiple ajax calls above
var callback = function () {
if ($.active !== 0) {
setTimeout(callback, '500');
return;
}
//whatever you need to do here
//...
};
callback();
Я встретил эту проблему и создал общий плагин jquery_counter для ее решения: https://bitbucket.org/stxnext/jquery_counter/
Я нашел простой способ, используя shift()
function waitReq(id)
{
jQuery.ajax(
{
type: 'POST',
url: ajaxurl,
data:
{
"page": id
},
success: function(resp)
{
...........
// check array length if not "0" continue to use next array value
if(ids.length)
{
waitReq(ids.shift()); // 2
)
},
error: function(resp)
{
....................
if(ids.length)
{
waitReq(ids.shift());
)
}
});
}
var ids = [1, 2, 3, 4, 5];
// shift() = delete first array value (then print)
waitReq(ids.shift()); // print 1
мое решение выглядит следующим образом
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);
});
работала достаточно хорошо. Я пробовал много разных способов сделать это, но я нашел это самым простым и многоразовым. Надеюсь, это поможет
посмотрите на мое решение:
1.Вставьте эту функцию (и переменную) в файл javascript:
var runFunctionQueue_callback;
function runFunctionQueue(f, index, callback) {
var next_index = index + 1
if (callback !== undefined) runFunctionQueue_callback = callback;
if (f[next_index] !== undefined) {
console.log(index + ' Next function avalaible -> ' + next_index);
$.ajax({
type: 'GET',
url: f[index].file,
data: (f[index].data),
complete: function() {
runFunctionQueue(f, next_index);
}
});
} else {
console.log(index + ' Last function');
$.ajax({
type: 'GET',
url: f[index].file,
data: (f[index].data),
async: false,
complete: runFunctionQueue_callback
});
}
}
2.Buil массив с вашими запросами, например:
var f = [
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}}
];
3.Создать функцию обратного вызова:
function Function_callback() {
alert('done');
}
4.Вызовите функцию runFunctionQueue с параметрами:
runFunctionQueue(f, 0, QuestionInsert_callback);
// first parameter: array with requests data
// second parameter: start from first request
// third parameter: the callback function
решение, данное Алексом, отлично работает. Та же концепция, но использует ее немного по-другому (когда количество звонков заранее не известно)
http://garbageoverflow.blogspot.com/2014/02/wait-for-n-or-multiple-or-unknown.html
попробуйте этот способ. сделайте цикл внутри функции Java script, чтобы дождаться завершения вызова ajax.
function getLabelById(id)
{
var label = '';
var done = false;
$.ajax({
cache: false,
url: "YourMvcActionUrl",
type: "GET",
dataType: "json",
async: false,
error: function (result) {
label='undefined';
done = true;
},
success: function (result) {
label = result.Message;
done = true;
}
});
//A loop to check done if ajax call is done.
while (!done)
{
setTimeout(function(){ },500); // take a sleep.
}
return label;
}