多次 AJAX 调用后执行代码

Question

在将其标记为重复之前，我查看了几篇关于 stackoverflow 的文章，但它们似乎没有回答我的问题。

我正在构建一个带有 api 的插件，该插件使用 http 请求进行调用。我有一个执行多次的主循环，其中包含多个不同的 AJAX 请求。完成所有请求后，我需要能够执行代码。

我遇到的主要问题是，在到达 $.when 函数时，包含所有承诺对象的数组要么为空，要么大部分为空，导致代码在一切完成之前触发。

这是基本的、简化的代码大纲：

var xhrs = [];
var xhr = null;

$.each(array, function(index, el) {
    // Step 1
    xhr = ajaxCall.success(function() {
        xhr = ajaxCall2();
        xhrs.push(xhr);
    });
    xhrs.push(xhr);

    // Step 2
    xhr = $.getJSON(params, function() {
        //...stuff...

        // Step 3
        var xhrs2 = [];
        $.each(function() {
            xhr = ajaxCall3();
            xhrs.push(xhr);
            xhrs2.push(xhr);
        });

        // Step 4
        xhr = ajaxCall4().success(function() {
            xhr = ajaxCall5().success(function() {
                //....
            });
            xhrs.push(xhr);
        });
        xhrs.push(xhr);


        // Step 5
        $.when(xhrs2).then(function() {
            $.each(function() {
                xhr = ajaxCall5();
                xhrs.push(xhr);
            });
        });

    });
    xhrs.push(xhr);
});


$.when.apply($, xhrs).then(function() {
    // Run when all ajax calls completed
});

我尝试将它移动到不同的位置，但没有成功。有什么想法吗？

Answer 1

$.when 函数将每个 XHR 作为参数，然后您可以在when 的then 中响应。每个响应都作为单独的参数传递。

$.when(xhr1, xhr2, xhr3).then(function(resp1, resp2, resp3) {
    // All 3 XHRs finished
});

Answer 2

您是否尝试过使每个请求都同步？ jquery 中一个简单的同步请求如下所示：

jQuery.ajax({
     url:    'http://example.com' ,
     success: function(result) {
                      //Do stuff with result
              },
     async:   false
});