检测多个异步 javascript $.ajax 调用的完成答案

【问题标题】：Detect completion of multiple async javascript $.ajax calls检测多个异步 javascript $.ajax 调用的完成
【发布时间】：2011-06-10 16:07:52
【问题描述】：

我有一个 javascript 函数，它进入一个循环并为每个循环发出一个异步 ajax 调用。我需要知道所有 ajax 调用何时返回并被处理，因为我想在那时更新 UI。

循环如下：

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 调用最终从服务器返回时，我调用 UI 刷新函数的最简单方法是什么？

谢谢。

【问题讨论】：

标签： javascript jquery ajax asynchronous

【解决方案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!
            }
        }
     });
}

请注意，我使用“完成”回调，而不是“成功”，因为如果其中一个请求失败，则不会调用“成功”，但会调用“完成”。此外，我首先在“总计”中声明了预期金额，而不是在此示例中进行计数。这只是避免了在您发布所有未决 ajax 请求之前完成所有未决 ajax 请求并因此具有匹配计数的不太可能（尽管技术上可能）的情况。

【讨论】：

我可以在函数顶部创建一个 var 并进行调整吗？这样做会不会有任何可能的范围界定或线程问题？非常感谢。

【解决方案2】：

最简单的方法是将处理程序附加到jQuery.ajaxStop 事件。如果您需要比这更多的钩子，您也可以附加到其他一些 global AJAX events。

【讨论】：