如何在所有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