如何在jQuery的.each循环中实现Ajax请求成功后继续执行下一次循环

嘿，我懂你现在的困扰——用async: false虽然能保证请求按顺序执行，但浏览器直接卡成PPT，用户体验太差了！其实不用纠结.each循环的限制，我们可以换个思路，把同步串行改成异步串行，既不卡浏览器，又能保证请求的执行顺序。

先看看你原来的代码，问题核心就出在同步AJAX上：

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

同步AJAX会阻塞浏览器主线程，必须等当前请求完成才会进入下一次循环，这就是浏览器冻结的根源，而且这种写法在新版jQuery里已经被标记为不推荐用法了。

下面给你几个实用的改造方案：

方案一：递归处理（容易理解，兼容性好） #

我们先把选中的复选框转成数组，然后用递归函数逐个发起异步请求，只有当前请求完成（成功或失败）后，再处理下一个：

// 先把所有选中的复选框收集成数组
const checkedBoxes = $("input:checkbox:checked").toArray();

// 定义递归函数，按顺序处理每个复选框
function processNext(index) {
    // 所有元素处理完就退出
    if (index >= checkedBoxes.length) {
        console.log("所有请求都搞定啦！");
        return;
    }

    const currentBox = checkedBoxes[index];
    // 这里根据你的实际情况获取id和val，比如从元素的data属性或value里取
    const id = $(currentBox).data("id");
    const val = $(currentBox).val();

    $.ajax({
        url: "import.php",
        method: "POST",
        data: { id: id, val: val },
        success: function(data) {
            // 这里写请求成功后的逻辑
            console.log(`第${index+1}个请求处理成功`, data);
            // 处理完当前的，继续下一个
            processNext(index + 1);
        },
        error: function(xhr, status, err) {
            // 别忘了处理错误，比如出错后要不要继续？
            console.error(`第${index+1}个请求失败`, err);
            // 如果出错也想继续处理下一个，就调用下面的函数；不想就注释掉
            processNext(index + 1);
        }
    });
}

// 启动第一个请求的处理
processNext(0);

方案二：用async/await（现代写法，代码更简洁） #

jQuery的AJAX本身支持Promise，所以我们可以用async函数配合await，让代码看起来像同步逻辑一样，但实际是异步执行的，完全不会阻塞浏览器：

async function processAllChecked() {
    const checkedBoxes = $("input:checkbox:checked").toArray();

    // 用for...of循环逐个处理，await会等待当前请求完成再继续
    for (const box of checkedBoxes) {
        const id = $(box).data("id");
        const val = $(box).val();

        try {
            const data = await $.ajax({
                url: "import.php",
                method: "POST",
                data: { id: id, val: val }
            });
            // 请求成功后的逻辑
            console.log("请求成功", data);
        } catch (err) {
            // 处理错误
            console.error("请求失败", err);
            // 如果出错想继续循环就保留catch，不想就throw err终止
        }
    }

    console.log("所有请求都处理完成啦！");
}

// 调用执行
processAllChecked();

额外优化：批量请求（推荐优先考虑） #

如果你的后端支持批量处理，其实可以把所有选中的复选框数据打包成一个数组，只发一次AJAX请求，这样效率更高，也完全不会有浏览器冻结的问题：

// 把所有选中的复选框数据整理成数组
const checkedData = $("input:checkbox:checked").map(function() {
    return {
        id: $(this).data("id"),
        val: $(this).val()
    };
}).toArray();

// 一次性发送所有数据
$.ajax({
    url: "import.php",
    method: "POST",
    data: { items: checkedData },
    success: function(data) {
        console.log("批量处理成功", data);
    },
    error: function(err) {
        console.error("批量处理失败", err);
    }
});

这种方式减少了HTTP请求次数，后端一次性处理所有数据，性能和体验都会更好，建议优先试试这个方案。

内容的提问来源于stack exchange，提问作者lStoilov