выполнить код после завершения всех запросов ajax

Question

У меня довольно сложный поиск, который использует несколько вызовов AJAX, поток выглядит следующим образом:

user performs search on button click
ajax request is made to php page which returns json data
    for each result in returned data additional ajax request is made
        run function which makes additional ajax call
    end for each
end click function

это все работает хорошо, я хотел бы показать сообщение о загрузке вdiv и отключите кнопку поиска, затем, когда все запросы ajax будут завершены, повторно включите кнопку и удалите загрузочное сообщение.

мой скрипт находится ниже, в данный момент отключение / возобновление действия кнопки происходит почтимгновенно, я полагаю, потому что вызовы ajax являются асинхронными, как мне отменить отключение кнопки и удаление сообщения загрузки после того, как все запросы ajax завершены и отображены данные ??вызывается из первоначального успеха основного вызова ajax

function getKeyLocations(id){
                    var myUrl = 'getKeyLocations.php';
                    var myBorough = id;
                    var myKeys = $('#keywords').val();
                    var myType = $('input[name=keyParams]:checked').val()   
                    var divId = '#borough_'+ id;
                    $.ajax({
                        url: myUrl,
                        type: 'POST',
                        data: 'borough_id='+myBorough+'&keys='+myKeys,
                        error: function(xhr, statusText, errorThrown){
                            // Work out what the error was and display the appropriate message
                        },
                        success: function(myData){
                            $(divId).html(myData);
                        }
                    });
                };

Answer 1

Вы хотите ajaxStart и ajaxStop , вот код для отображения экрана загрузки. Такой милый маленький лайнер.

$('.loadingElement')
     .ajaxStart(function() { this.show(); })
     .ajaxStop(function() { this.hide(); });

Для вашего конкретного использования, похоже, что код будет что-то вроде

$('#advKeyBtn')
     .ajaxStart(function() { this.attr('disabled', 'disabled'); })
     .ajaxStop(function() { this.attr('disabled', ''); });

jquery: ajaxStart

Всякий раз, когда собирается отправлять Ajax-запрос, jQuery проверяет, Есть другие невыполненные запросы Ajax. Если никто не в Прогресс, JQuery вызывает событие ajaxStart. Любой и все обработчики которые были зарегистрированы с помощью метода .ajaxStart () выполняются в на этот раз.

jquery: ajaxStop

Когда Ajax-запрос завершается, jQuery проверяет, есть ли любые другие невыполненные запросы Ajax. Если ничего не осталось, JQuery вызывает событие ajaxStop. Все обработчики, которые были зарегистрированы с помощью метода .ajaxStop () выполняются в это время. AjaxStop Событие также запускается, если последний ожидающий запрос Ajax отменяется возвратом false в функции обратного вызова beforeSend.

из malsup относительно различий между ajaxStop и ajaxComplete:

ajaxStop срабатывает, когда количество ожидающих запросов ajax достигает нуля. ajaxComplete запускается после каждого ответа получено. ajaxComplete также передается XHR и объекту настроек.

Answer 2

Вы должны создать функцию, которая будет обрабатывать все ваши запросы.Когда все запросы будут завершены, включите кнопку и покажите сообщение.

var ajaxLoading = {
        _requestsInProcess: 0,

        show: function () {
            if (this._requestsInProcess == 0) {
                $('#advKeyBtn').attr('disabled', 'disabled');
                $('#searchStatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> Searching Locations...');
            }

            this._requestsInProcess++;
        },

        hide: function () {
            this._requestsInProcess--;
            if (this._requestsInProcess == 0) {
                $('#advKeyBtn').attr('disabled', '');
                $('#searchStatus').html('Search Complete, click on an area to view locations');
            }
        }
    };

сейчас, перед использованием всех вызовов ajax:

ajaxLoading.show()

И во всех ваших методах успеха используйте:

ajaxLoading.hide()

Надеюсь, это поможет.

Answer 3

Согласитесь с вышесказанным, купите мое предложение: уменьшить счетчик по таймауту или неудачному ответу вместо использования таймера.

Затем счетчик будет подсчитывать количество завершенных ответов (сбой илинет.)

Answer 4

Да, AJAX-запрос асинхронный. Одним из решений является создание счетчика, инициализированного количеством отправленных запросов ajax, а затем при каждом ответе уменьшать счетчик. Когда вы достигнете 0, обновите свой статус и снова включите. Просто имейте в виду, что вам может потребоваться автоматическое включение через некоторое время, если сеть зависнет.