jQuery中如何基于Ajax响应跳过循环迭代（避免使用async:false）

实现思路 #

废弃async: false的同步阻塞配置，将Ajax请求封装为Promise对象，借助async/await语法获取异步返回结果，既完全匹配原代码逐次判断、符合条件跳过当前循环迭代的逻辑，又不会阻塞主线程影响页面响应。

1. 改造Ajax封装函数 #

jQuery的$.ajax本身就返回Promise类对象，无需额外嵌套回调，直接移除同步配置、返回请求实例即可：

function ajaxCallHere(name) {
    const url = '/admin/someUrl/' + name;
    return $.ajax({
        url: url,
        type: 'GET'
    }).then(response => response.skip); // 直接返回业务需要的skip字段
}

2. 改造循环处理逻辑 #

将循环所在函数标记为async，循环内部通过await等待当前请求返回结果后再做判断，执行顺序和原同步代码完全一致，但请求过程中主线程可以正常处理UI交互、其他异步任务，不会出现页面卡死的问题：

async function getAllNames() {
    for (let i = 0; i < names.length; i++) {
        // 等待当前请求返回结果，全程非阻塞
        const skipVal = await ajaxCallHere(names[i].fullName);
        
        if(skipVal == 'yes') {
            continue;
        }
        // 此处编写不需要跳过的正常业务逻辑
    }
}

注：原示例代码循环中直接取names.fullName属于索引笔误，以上代码已修正为按循环索引读取当前项的fullName字段。

可选优化：并发请求模式 #

如果业务没有接口限流要求、不需要严格按数组顺序处理结果，可以改用Promise.all并发发起所有请求，大幅缩短整体等待时长：

async function getAllNamesConcurrent() {
    // 一次性发起所有请求
    const requestPromises = names.map(item => ajaxCallHere(item.fullName));
    // 等待所有请求返回结果，结果顺序和原数组一一对应
    const skipResults = await Promise.all(requestPromises);

    for (let i = 0; i < names.length; i++) {
        const skipVal = skipResults[i];
        if(skipVal == 'yes') {
            continue;
        }
        // 此处编写不需要跳过的正常业务逻辑
    }
}

注意：并发模式会一次性发送全部请求，如果names数组长度较大，很容易触发浏览器同域名并发请求限制，同时会给后端造成突增流量压力，大列表场景优先使用前面的串行await写法。

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