Question

我有一个函数，其中有一个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都会被阻塞，直到循环结束。

我该怎么做？

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

等待jQuery.each（）直到循环中的ajax调用完成？

1 个答案: