如何让jQuery的forEach循环等待异步函数执行完成后再继续

原代码：

$(document).on('click', '#exportDashboardsToReport', function (e) {
    checkedValues.forEach(element => {
        if (element.includes("-")) {
            data = element.split('-');
            data.forEach(item => {
                if (item.substr(0, 1) == "c") {
                    customerId = item.replace("c_", "");                       
                    Customers=customerId;                      
                } else {
                    Locations =item ;
                }                                      
            });
            replacePlaceholder(Customers, Locations, function(){
                addReplaceHolderToFile(Customers, Locations);
            });
            
        }
    });
});

运行时网络面板显示replacePlaceholder被一次性调用4次，原因是replacePlaceholder和addReplaceHolderToFile内部包含异步Ajax请求，forEach不会等待异步操作完成就进入下一次迭代。需要实现串行执行逻辑：迭代循环 → 调用replacePlaceholder → 等待异步任务完成 → 继续下一次迭代。

解决方案 #

1. 将回调式异步函数转为Promise风格 #

首先把依赖回调的replacePlaceholder改造为返回Promise的形式，这样才能用await等待它执行完成：

// 改写replacePlaceholder，用Promise替代回调
function replacePlaceholder(customers, locations) {
    return new Promise((resolve, reject) => {
        // 保留原有的异步Ajax逻辑，调整回调为Promise的resolve/reject
        $.ajax({
            // 原请求的URL、参数等配置
            success: function() {
                // 原回调中执行的addReplaceHolderToFile逻辑放在这里
                addReplaceHolderToFile(customers, locations);
                // 通知Promise任务完成
                resolve();
            },
            error: function(error) {
                // 捕获错误，可选处理
                reject(error);
            }
        });
    });
}

2. 用async/await + for...of实现串行循环 #

将点击事件处理函数声明为async函数，用for...of替代forEach，确保每次迭代都等待异步操作完成后再继续：

$(document).on('click', '#exportDashboardsToReport', async function (e) {
    // 遍历checkedValues，for...of支持await等待
    for (const element of checkedValues) {
        if (element.includes("-")) {
            let Customers, Locations;
            const data = element.split('-');
            for (const item of data) {
                if (item.substr(0, 1) === "c") {
                    const customerId = item.replace("c_", "");                       
                    Customers = customerId;                      
                } else {
                    Locations = item;
                }                                      
            }
            // 等待当前replacePlaceholder完成，再进入下一次循环
            await replacePlaceholder(Customers, Locations);
        }
    }
});

可选：不修改原函数的兼容方案 #

如果不想改动replacePlaceholder的原有结构，可以用一个包装函数把回调转为Promise：

// 包装原函数为Promise风格
function wrapReplacePlaceholder(customers, locations) {
    return new Promise(resolve => {
        replacePlaceholder(customers, locations, () => {
            resolve();
        });
    });
}

然后在循环中使用await wrapReplacePlaceholder(Customers, Locations);即可。

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