使用jQuery的forEach循环AJAX时如何实时显示进度指示器

问题核心在于AJAX的异步特性：forEach是同步执行的，会一次性发起所有请求，但此时请求还未完成，若你之前把进度更新逻辑放在循环体内而非请求回调中，自然只能等所有请求结束后看到最终状态。

要实现实时更新，只需将进度计数与DOM更新逻辑移至AJAX的success回调中，让每个请求成功后立即触发进度刷新：

示例代码 #

HTML部分

<div id="progress"></div>

jQuery部分

// 假设这是你要批量处理的数据数组
const requestDataList = [/* 你的请求数据项 */];
let successCount = 0;
const totalRequestNum = requestDataList.length;
const $progressBox = $('#progress');

// 初始化进度显示
$progressBox.text(`0 of ${totalRequestNum} success`);

requestDataList.forEach(dataItem => {
  $.ajax({
    url: '/your-api-url', // 替换为实际接口地址
    method: 'POST',
    data: dataItem,
    success: function() {
      // 每次请求成功后递增计数并更新页面显示
      successCount++;
      $progressBox.text(`${successCount} of ${totalRequestNum} success`);
    },
    error: function() {
      // 可选：处理请求失败场景，比如显示失败数量
      $progressBox.text(`${successCount} of ${totalRequestNum} success (${totalRequestNum - successCount - 1} failed)`);
    }
  });
});

关键注意点 #

• 回调内更新：只有在AJAX请求成功的回调中操作计数器和DOM，才能确保每完成一个请求就实时刷新进度
• 初始状态设置：提前显示0 of N success，避免页面一开始处于空白状态
• 保持异步模式：确保AJAX使用默认的异步模式（async: true），若设置为同步（async: false）会阻塞浏览器，进度同样无法实时更新

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