jQuery 在 .ajax 成功时继续下一个循环 (.each)

Question

我有很多复选框，如果一个复选框被选中，我将用 .ajax 发送它的值。目前我正在使用 async : false 来确保它在 ajax 成功后从下一个开始循环。但是，它会冻结浏览器，直到它完成 .each 循环。

我在这里看到了类似的事情：jQuery continue loop execution after ajax success 但无法弄清楚如何使它适应我使用 .each 而不是 for[=18= 的情况]

$("input:checkbox:checked").each(function () {                      
    $.ajax({
        async : false,
        url:"import.php",
        method:"POST",
        data:{id:id, val:val},
        success:function(data) {
            //do some action
        }
    });
});

Answer 1

使用来自的相同原则：

var elements = $("input:checkbox:checked")

var i = 0;
doLoop();

function doLoop() {
    if ( i >= elements.length ) {
        return;
    }

    // To get the element we are up to: $(elements[i])

    $.ajax({
        async : false,
        url:"import.php",
        method:"POST",
        data:{id:id, val:val},
        success:function(data) {
            //do some action
            i++
            doLoop()
        }
    });
}

您可能希望更改 data:{id:id, val:val} 以使用单个复选框中的 ID 和值，因此在 .ajax() 调用之前您可能希望：

let e = $(elements[i])

并获取 id 和值：

data:{id:e.attr('id'), val:e.val()}

jQuery 在 .ajax 成功时继续下一个循环 (.each)

jQuery continue with next loop (.each) on .ajax success

ajax

each

jquery