如何在所有ajax完成時觸發一個函數？

Question

AJAX請求將被用戶點擊來啓動

這是不可能知道有多少請求將被髮送

我試過ajaxComplete，但它不工作，我覺得它不能檢測AJAX頁面加載後。

function ajax1() { 
    $.ajax({ 
     url: 'getCount.php', 
     type: 'GET', 
     dataType: 'html', 
     success: function (data) { 
      var count = parseInt(data); 
      for (var i = 0; i < count; i++) { 
       ajax2(); 
      } 
     } 
    }); 
} 

function ajax2() { 
    $.ajax({ 
     url: 'getCount2.php', 
     type: 'GET', 
     dataType: 'html', 
     success: function (data) { 
      var count = parseInt(data); 
      for (var i = 0; i < count; i++) { 
       ajax3(); 
      } 
     } 
    }); 
} 

function ajax3() { 
    $.ajax({ 
     url: 'ajax3.php', 
     type: 'GET', 
     dataType: 'html', 
     success: function (data) { 
      //do something 
     } 
    }); 
} 
$(document).ajaxComplete(function (event, xhr, settings) { 
    alert('Complete'); 
}); 

Answer 1

UPDATE：真的很好看的諾言：Promises cookbook

這樣做，是使用由$.ajax函數返回的承諾的正常方式。

改變你的函數返回.ajax調用的結果：

function ajax1(..) { 
    return $.ajax(...) 
} 

然後使用$.when使當所有的承諾都解決解決新的承諾。

$.when([ajax1(), ajax2(), ajax3()]).then(function() { alert('all complete') }) 

然而，在更復雜的情況下（就是你），你需要動態存儲所有的承諾引用，並只調用一次$.when所有承諾增加。

因此，例如，您可以創建承諾數組，其中一個用於ajax2調用，另一個用於調用ajax3。

var ajax2calls = [], ajax3calls=[] 

function ajax1() { 
    return $.ajax({ 
    url: 'getCount.php', 
    type: 'GET', 
    dataType: 'html', 
    success: function (data) { 
     var count = parseInt(data); 
     for (var i = 0; i < count; i++) { 
      ajax2calls.push(ajax2()); 
     } 

     $.when(ajax2calls).then(function() { 
      $.when(ajax3calls).then(function() { 
       alert('all done') 
      } 
     }) 

    } 
    }); 
} 

此外，您可能要考慮使用Bluebird承諾庫，因爲它提供了比普通承諾/ A或承諾/ A +多了很多豐富的API。檢查map,settle, all方法等

Answer 2

有一個關於你的問題非常類似的問題，看看這個，請：How to know when all ajax calls are complete

Answer 3

，我看到這將使最有意義的方法是做嵌套回調。這樣，一切都在回調中發生，直到它們全部完成纔會發生。這個問題可能有助於wait for a jquery ajax callback from calling function