如何在jQuery each循环所有AJAX请求完成后再执行后续函数

问题原因 #

你遇到的问题是AJAX请求属于异步操作，each循环只会批量发起所有请求，不会等待请求返回结果就直接执行了后续的$("#totmins").val(netMinutes)赋值逻辑，此时所有请求的回调还没触发，netMinutes自然还是初始的0值。

修复方案 #

我们可以通过Promise批量等待所有AJAX请求完成后，再执行总分钟数的赋值操作，修改后的JS代码如下：

$("#btnCalculate").click(function () {
    var netMinutes = 0.00;
    // 存储所有行AJAX请求的Promise数组
    var ajaxPromises = [];

    $('#tblEntry tbody tr').each(function () {
        var tr = $(this);
        var sunHrs = tr.find("#SundayNetHrs").val();
        var monHrs = tr.find("#MondayNetHrs").val();
        var tueHrs = tr.find("#TuesdayNetHrs").val();
        var wedHrs = tr.find("#WednesdayNetHrs").val();
        var thuHrs = tr.find("#ThursdayNetHrs").val();
        var friHrs = tr.find("#FridayNetHrs").val();
        var satHrs = tr.find("#SaturdayNetHrs").val();
        var netHrs = tr.find("#NetHrsPerWeek").val();
        var fromDate = tr.find("#FromDate").val();
        var toDate = tr.find("#ToDate").val();

        // 把当前行的AJAX请求Promise存入数组
        var reqPromise = $.ajax({
            type: "GET",
            url: "/Employee/GetSystemCalculatedHolidayByDate?EID=" + $("#EmployeeID option:selected").val()
                + "&NetHrs=" + netHrs
                + "&Sunday=" + sunHrs
                + "&Monday=" + monHrs
                + "&Tuesday=" + tueHrs
                + "&Wednesday=" + wedHrs
                + "&Thursday=" + thuHrs
                + "&Friday=" + friHrs
                + "&Saturday=" + satHrs
                + "&Fromdate=" + fromDate
                + "&Todate=" + toDate,
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function (data) {
            // 如果返回结果已经是数值，可删除JSON.parse直接使用data
            var systemHoliday = JSON.parse(data);
            systemHoliday = systemHoliday.toFixed(2);
            var time = systemHoliday.split('.');
            var eachMinutes = parseInt(time[0] * 60) + parseInt(time[1]);
            netMinutes += eachMinutes;
            tr.find("#HolidayEnt").val(systemHoliday);
        }).fail(function (response) {
            console.log("请求失败：", response.responseText);
            // 失败时可自定义处理逻辑，比如给当前行设置错误提示
            // tr.find("#HolidayEnt").val("计算失败");
        });
        ajaxPromises.push(reqPromise);
    });

    // 等待所有AJAX请求全部处理完成后，再赋值总分钟数
    Promise.all(ajaxPromises).then(function() {
        $("#totmins").val(netMinutes);
    });
});

核心修改说明 #

1. 新增ajaxPromises数组存储每一行的AJAX请求对象，jQuery的$.ajax返回的Deferred对象本身兼容Promise规范，可直接被Promise.all识别
2. 把总分钟数赋值逻辑移到Promise.all的回调中，保证所有行的计算都完成后才会更新总数值
3. 移除了冗余的全局netMinutes声明，避免作用域污染
4. 把原有的success/error回调改成了jQuery官方更推荐的done/fail写法，逻辑完全兼容原有需求

可选优化 #

如果表格行数较多，逐行发请求会产生大量HTTP请求，性能较差，你可以把所有行的参数合并为一个数组，一次性提交给后端接口批量计算，一次性返回所有行的结果，能大幅提升加载速度。

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