處理jQuery ajax異步調用的最佳方式是什麼？

Question

我最近開始使用沉重的客戶端jQuery/javascripts的項目。我正努力讓屏幕工作。

我有功能類似下面：

function init{ 
    populateTypes(); 
    populateGroups(); 
    populateStatuses(); 
    applyCurrentUserSettings(); 
} 

所有populate*方法讓Ajax調用（$.ajax）服務器和poluate的觀點有些複選框列表。 applyCurrentUserSettings方法也會發出ajax請求並在視圖上設置當前用戶選擇。

問題是populate*方法是異步的，調用方法是applyCurrentUserSettings，checkboxlist是「有時」空的，apply方法失敗。

我可以通過在$.ajax調用中傳遞async: false來獲得此工作，或者將每個ajax調用鏈接到另一個調用中，但是我想知道是否有更好的方法/設計模式來處理這種情況。

Answer 1

您可以使所有功能返回延期並使用$.when。 http://api.jquery.com/jQuery.when/

function populateTypes() { 
    //your code 
    return $.ajax(...); 
} 


$.when(populateTypes(), populateGroups(), ...).then(applyCurrentUserSettings); 

Answer 2

我相信你可以使用ajaxComplete（）來延遲觸發器applyCurrentUserSettings直到查詢完成。

Answer 3

建立你的功能，使他們正確地返回承諾的對象，然後使用。然後方法鏈多一個接一個，或。當方法後，發送了他們的X號，然後做一些事情的時候所有這些都是完整的。

function populateTypes() { 
    //your code 
    return $.ajax(...); 
} 

以下將它們發送1在一個時間：

function init() { 
    populateTypes().then(populateGroups) 
     .then(populateStatuses) 
     .then(applyCurrentUserSettings) 
     .done(function(){ 
      console.log("all done"); 
     }); 
} 

以下將除了最後一個一次，最後前三個完成一次時：

function init() { 
    $.when(populateTypes(), populateGroups(), populateStatuses()) 
     .then(applyCurrentUserSettings) 
     .done(function(){ 
      console.log("all done"); 
     }); 
}