所有ajax完成后如何触发函数？答案

【问题标题】：How to trigger a function when all ajax finish?所有ajax完成后如何触发函数？
【发布时间】：2015-09-06 18:16:55
【问题描述】：

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');
});

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

更新：关于 promise 的真正好读物：Promises cookbook

通常的做法是使用$.ajax 函数返回的承诺。

更改您的函数以返回 .ajax 调用的结果：

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

然后使用$.when 在所有promise 都解决后使新promise 解决。

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

但是，在更复杂的情况下（如您的情况），您需要动态存储对所有 Promise 的引用，并且只有在添加了所有 Promise 后才调用 $.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 promise 库，因为它提供了比常规 promise/A 或 promise/A+ 更丰富的 API。检查map、settle、all方法等

【讨论】：

我之前听过类似的概念，就是Flow Control，它们是一样的吗？
@CLSo 不是真的，不。但是，您可以从流控制的角度考虑 Promise。
@CLSo 忘记给你文档链接api.jquery.com/category/deferred-object - jquery deferred/promises。还有promisejs.org

【解决方案2】：

我认为最有意义的方法是进行嵌套回调。这样，所有事情都在回调中发生，并且在它们全部完成之前什么都不会发生。这个问题可能会有所帮助wait for a jquery ajax callback from calling function

【讨论】：