jQuery 在 .ajax 成功时继续下一个循环（.each）

Posted 2023-03-16

【中文标题】jQuery 在 .ajax 成功时继续下一个循环（.each）

【英文标题】：jQuery continue with next loop (.each) on .ajax success

【发布时间】：2021-11-13 03:04:29

【问题描述】：

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

我在这里看到了类似的东西：jQuery continue loop execution after ajax success，但不知道如何适应我使用.each而不是for的情况

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

【参考方案1】：

使用与https://***.com/a/7330753/378779相同的原理：

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 和 value：

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

【讨论】：

奇怪的是我有 let e = $(elements[i]); var id = e.attr('name'); var val = e.val(); 但 id 和 val 都是空的

它对我有用。见jsfiddle.net/kmoser/7q8fgovj

纠正它确实有效。我在function doLoop() 之外设置了let e = $(elements[i])。非常感谢！