如何在循环调用AJAX时同步执行请求并实时更新DOM

问题根因分析 #

• 使用async: false时，同步请求会完全阻塞浏览器主线程，包括DOM渲染、UI更新在内的所有任务都会被暂停，直到所有同步请求全部执行完成才会批量处理积压的DOM更新，所以看不到中间的进度变化。
• 去掉async: false后，AJAX默认是异步非阻塞的，for循环会连续执行所有迭代，不会等待上一个请求返回就发起下一个，自然会出现请求并发发出的问题。

解决方案 #

使用async/await语法串行执行异步请求，既可以保证请求顺序，又不会阻塞浏览器渲染线程，DOM更新可以正常触发。

修正后的代码 #

// 给提交处理函数加上async关键字，标识内部可以使用await
$("#form").on("submit", async function(e){    
    e.preventDefault();
    $("#submit").prop("disabled",true);
    $(".loader").css("display", "block");
    var iterations = 10;
    // 修正原代码baseUrl缺少引号的问题
    const baseUrl = "https://exampleapi.com";
    try {
        for (let i = 0; i < iterations; i++) {
            // 此处设置你的POST请求参数data
            const data = {};
            // await等待当前请求完成后再执行后续代码
            await $.ajax({
                url: baseUrl + "/endpoint",
                type: "POST",
                data: JSON.stringify(data),
                contentType: "application/json",
            });     
            $(".progress").text("completed " + (i+1) + " iterations");      
        }
    } catch (err) {
        // 可在此处添加请求失败的处理逻辑
        console.error("请求出错：", err);
    } finally {
        // 无论成功失败都隐藏加载状态，恢复按钮
        $(".loader").css("display", "none");
        $("#submit").prop("disabled", false);
    }
});

方案说明 #

• jQuery的$.ajax返回的jqXHR对象原生支持Promise规范，可以直接被await关键字等待执行完成，不会阻塞主线程，DOM更新操作可以正常渲染。
• 增加了try/catch捕获异常，避免某一个请求失败导致整个流程中断，后续的状态重置逻辑也放到了finally块中，保证异常场景下页面状态不会错乱。

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