Обнаружение завершения нескольких асинхронных вызовов javascript $ .ajax

Question

У меня есть функция javascript, которая входит в цикл и выполняет асинхронный вызов ajax для каждого цикла. Мне нужно знать, когда ВСЕ вызовы ajax вернулись и были обработаны, потому что я хочу обновить пользовательский интерфейс на этом этапе.

Цикл выглядит следующим образом:

function sync_SyncLocalStorageToServer() {
    if (helper_IsAppOnline()) {
        $.log('sync_SyncLocalStorageToServer detects app is ONLINE');
        // Post each cached entry to the server - this is the main sync function
        for (var i = 0, len = localStorage.length; i < len; i++) {
            var lskey = localStorage.key(i);
            if (lskey.substr(0, 8) === 'response') {
                $.log('Sync found response with key=' + lskey);
                var postdata = localStorage.getItem(lskey); // Get the form data
                $.log('Calling server with ls response:' + postdata);
                var localkey = lskey;
                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: "/Profile/PostForm",
                    data: { jsonpost: postdata },
                    success: function (data) {
                        if (data.rc == "success") {
                            localStorage.removeItem(data.localStorageKey); // Remove the relevant localStorage entry
                            $.log('ServerSuccess:' + data.message + ',removed localStorageKey=' + data.localStorageKey);
                        } else {
                            $.log('ServerUnhappy:' + data.message + ',did not remove localStorageKey=' + data.localStorageKey);
                        }
                    }
            , error: function (data) {
                $.log('ERR:' + data);
            }
                });
            }
        }
    }
    else {
        $.log('sync_SyncLocalStorageToServer detects app is OFFLINE');
    }
}

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

Спасибо.

Answer 1

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

var total = arr.length;
var count = 0;
for(var i = 0; i < arr.length; i++){
     $.ajax({
        // other options
        complete: function(){
            count++;
            if(count == total){ 
                // all finished!
            }
        }
     });
}

Обратите внимание, что я использую обратный вызов «полностью», а не «успех», так как еслизапросы терпят неудачу, «успех» не будет вызван, но «полный» будет.Кроме того, я сначала объявил ожидаемую сумму в 'total', а не в этом примере.Это просто позволяет избежать маловероятного (хотя и технически возможного) сценария завершения всех ожидающих запросов ajax до того, как вы отправите все из них, и, следовательно, соответствующего количества.

Answer 2

Проще всего было бы прикрепить обработчик к событию jQuery.ajaxStop. Если вам требуется больше хуков, чем это, вы можете присоединиться к другим глобальным событиям AJAX .