AJAX：同步或隊列？

Question

我正在使用AJAX調用一些Web服務。 在我的網頁上，用戶必須選擇一個或多個人加入一個組。這個「組列表」被髮送到一個PHP頁面（使用POST方法），該頁面將執行關聯的WebServices。

我的問題是關於同步/異步AJAX調用。 我的目標是在過程中顯示一個動畫（例如gif），它阻止用戶界面，最後顯示消息「完成」。我使用了兩個Jquery插件：Apprise的消息和動畫的jquery msg。

同步模式：不顯示動畫，但當AJAX調用完成時，將顯示消息「完成」。 在異步模式下：顯示動畫，但在AJAX調用結束之前顯示消息「complete」。

所以我的問題是，我必須排隊多個異步AJAX調用？還是其他什麼？

Answer 1

是的，這可能是因爲您有多個同時運行的異步調用。
我用下面的小腳本來控制Ajax調用多少正在運行：

$.xhrPool = { calls: [] }; 
$.xhrPool.abortAll = function() { 
    $(this.calls).each(function (idx, jqXHR) { 
     jqXHR.abort(); 
    }); 
    $.xhrPool.calls = []; 
}; 


// Setup ajax requests 
$.ajaxSetup({ 
    beforeSend: function (jqXHR) { 
     $.xhrPool.calls.push(jqXHR); 
    }, 
    complete: function (jqXHR) { 
     var isInArray = $.inArray(jqXHR, $.xhrPool.calls); 

     if (isInArray > -1) { 
      $.xhrPool.calls.splice(isInArray, 1); 
     } 
    } 
}); 

這種方式，您將有數組$.xhrPool.calls在所有當前活動的Ajax請求。然後你可以檢查if ($.xhrPool.calls.length == 0)，如果是刪除你的加載動畫。

此外，您可以撥打$.xhrPool.abortAll()，這將停止所有活動的ajax請求。