AJAX - 等待响应，然后再进行下一次 AJAX 调用

Question

我创建了一个函数，它使用 class="health_report" 循环遍历每个 div 标签，为每个 div 进行 AJAX 调用。唯一的问题是它会立即进行 50 个 AJAX 调用（假设我有 50 个 DIV 标签）。这没关系，但出于我的目的，我需要它等到第一个 AJAX 调用完成（触发成功函数）移动到下一个 DIV 标记。代码如下：

$('.health_report').each(function(i, obj) {
    //  FIRST AJAX CALL
    generateHealthReport();
});

    function generateHealthReport(fileID,filter,slug,reportID,importance,reputation) {

        $.ajax({
            type: "POST",
            url: ajaxurl,
            data: {
                "action": 'generateHealthReport'
            },
            dataType: "html",
            success: function (returnData) {
               //   do something

            }
        });
    }

所以我尝试过的应该是在循环中添加一个计时器

我怎样才能让它如此循环（使用一个称为计时http://creativecouple.github.io/jquery-timing/的JQuery）

所以代码变成了这样：

$('.health_report').each($).wait(3000,function(i, obj) {
    //  FIRST AJAX CALL
    generateHealthReport();
});

循环现在在迭代之间暂停 3 秒，这使第一个 AJAX 调用有时间在循环移动到下一个 DIV 标记之前完成。这使得 AJAX 调用按照我需要的方式发生，但由于某种原因，它会出现故障，有时返回的 HTML 响应只是应该返回的 HTML 的一部分。还有另一种方法可以做到这一点吗？如何让循环暂停，直到它进行的 AJAX 调用完成？

Answer 1

您可以使用ajaxComplete 或ajax 中的完整选项：

$.ajax({
    type: "POST",
    url: ajaxurl,
    data: {
        "action": 'generateHealthReport'
    },
    dataType: "html",
    success: function (returnData) {
       //   do something

    }
    complete: function() {
       // This is called after completion of Ajax.
       // nextAjax();
    }
});