Инициируйте функцию только после завершения нескольких запросов Ajax
У меня есть конкретная функция, которую я хочу выполнить однажды, и только после завершения нескольких запросов Ajax.
Мое текущее решение немного походит на это:
function doWork() {
//This is the function to be run once after all the requests
}
//some tracking/counting variables
var ajaxDoneCounter = 0;
var numOfAjaxRequests = 5;
var workDone = false;
function doWorkTrigger() {
ajaxDoneCounter++;
if( !workDone && ajaxDoneCounter >= numOfAjaxRequests ) {
workDone = true;
doWork();
}
}
// ...
//and a number of ajax requests (some hidden within functions, etc)
//they look something like this:
$.ajax({
url: "http://www.example.com",
dataType: "json",
success: function( data ) {
//load data in to variables, etc
doWorkTrigger();
}
});
Одна очевидная ловушка в вышеупомянутом - то, что любой вызов Ajax, который не успешен, не увеличит ajaxDoneCount и так doWork() никогда не будет, вероятно, называться. Я могу обойти то использование error обратный вызов во внутренней части любой $.ajax, таким образом, это не волнует меня слишком много.
То, что я хочу знать, - является ли вышеупомянутое безопасной и/или хорошей практикой?
Существует ли прием, который я еще пропустил, или какая-либо вещь, которая могла бы работать лучше?
3 ответа
Обновление: Начиная с jQuery 1.5, отложенные объекты [docs] обеспечивают более чистое решение. Взгляните на пример здесь .
Я бы использовал .ajaxComplete () , он будет запускаться всякий раз, когда вызов Ajax завершится (успех или ошибка):
var numOfAjaxRequests = 5;
$(document).ajaxComplete(function() {
numOfAjaxRequests--;
if(!numOfAjaxRequests) {
doWork();
}
});
Тогда вам не нужно редактировать каждый запрос Ajax.
Вы даже можете использовать .ajaxSend () , чтобы получать уведомления о запуске запросов Ajax, вместо его жесткого кодирования (но я не уверен, действительно ли это работает, возможно, вы столкнетесь с условиями гонки):
var numOfAjaxRequests = 0;
$(document).ajaxSend(function() {
numOfAjaxRequests++;
});
Я думаю, вам следует использовать complete (XMLHttpRequest, textStatus) ajax-событие вместо успеха (data, textStatus, XMLHttpRequest).
Согласно справке jQuery:
завершено (XMLHttpRequest, textStatus)Функция, вызываемая, когда запрос завершается (после успеха и обратные вызовы ошибок выполняются). В функция получает два аргумента: Объект XMLHttpRequest и строка описание статуса запроса. Это событие Ajax.
Я недостаточно знаю о внутреннем устройстве JavaScript, но есть опасность, что операция:
ajaxDoneCounter++;
не является атомарной. Если это так, то это может быть связано с состоянием гонки.