等待 jQuery.each() 直到循环内的 ajax 调用完成？答案

【问题标题】：Wait jQuery.each() until ajax call inside loop has been completed?等待 jQuery.each() 直到循环内的 ajax 调用完成？
【发布时间】：2018-05-24 15:30:05
【问题描述】：

我有一个函数，其中有一个 jQuery.each 迭代表的所有行。

问题是在 each() 代码中有一个 ajax 调用（因此对表的每一行都有一个 ajax 调用），我希望它等到 ajax 调用完成后再开始下一次迭代，使其更具顺序性，避免一次启动 300 个 ajax 调用的可能性。

这是我的代码示例：

$("button").click(function () {

    $("#table tbody tr").each(function () {

        $.ajax({
            url: "http://api.example.com/?param=value",
            success: function (data) {
                updateUIBasedOnResult(data);
            }
         });
    });
});

我知道我可以使 ajax 调用同步，但在这种情况下，所有 UI 都将被阻塞，直到循环结束。

我该怎么做？

【问题讨论】：

不要在循环中发出 AJAX 请求——尤其是不要发出 300 个请求。将所有数据聚合到一个请求中，然后发出该请求一次。
我希望有一种方法可以做到这一点。但如果不可能，我会听从你的建议。谢谢

标签： jquery ajax

【解决方案1】：

最后我使用递归来解决我的问题。我创建了一个对象数组，其中每个对象代表表中的一行，而不是 jQuery.each() 循环，我将数组传递给递归函数。基本上，该函数进行 ajax 调用，将数组的第一个对象作为数据传递，并且在回调函数中，我递归调用相同的函数来删除数组的第一个元素，因此在每次调用时，函数都会使用不同的 ajax 调用行。

这是一个示例代码：

$("#creafatturebtn").click(function () {
    var rows_array = [];

    //populate rows_array

    generate(rows_array);
});

function generate(rows) {

    if (rows.length > 0) {
        varid = rows[0].id;
        var amount = rows[0].amount;

        $.get("http://api.example.com/?method=Example&id=" + id, { amount: amount }, function (data) {
            updateUIBasedOnResult(data);
            rows.shift();
            generate(rows);
        });
    }
}

【讨论】：