javascript - 等到所有 jQuery Ajax 请求完成？

Question

如何让一个函数等待，直到所有 jQuery Ajax 请求在另一个函数内完成？

简而言之，我需要等待所有 Ajax 请求完成后才能执行下一个请求。但如何呢？

Answer 1

jQuery 现在定义了 when function为此目的。

它接受任意数量的延迟对象作为参数，并在所有对象解析时执行一个函数。

这意味着，如果您想启动(例如)四个 ajax 请求，然后在完成后执行一个操作，您可以执行如下操作:

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

在我看来，它提供了干净清晰的语法，并避免涉及任何全局变量，例如 ajaxStart 和 ajaxStop，这可能会在页面开发时产生不需要的副作用。

如果你事先不知道需要等待多少个ajax参数(即你想使用可变数量的参数)，它仍然可以完成，但只是有点棘手。请参阅Pass in an array of Deferreds to $.when() (也许 jQuery .when troubleshooting with variable number of arguments )。

如果您需要更深入地控制 ajax 脚本等的失败模式，您可以保存 .when() 返回的对象 - 它是一个 jQuery Promise包含所有原始 ajax 查询的对象。您可以对其调用 .then() 或 .fail() 来添加详细的成功/失败处理程序。