如何基于jQuery跟踪多个AJAX请求、统计数量并实现动态进度条

原尝试代码的核心问题 #

• 总请求数计算逻辑失效：循环内反复将totalIDs重置为0，且对数字类型的循环变量x取x.length，最终totalIDs为undefined，进度百分比计算完全无法得到正确值
• 进度统计维度错误：当前实现是将单个请求的内部状态变化作为进度更新依据，正确的统计逻辑应该是以整个请求批次为单位，计数已走完流程的请求数量，和总请求数的比值作为整体进度
• 变量作用域漏洞：循环中直接用全局变量x做遍历，所有异步回调拿到的x都是循环结束后的最终值，没法对应每个请求的ID，直接导致进度计算混乱

正确实现步骤 #

1. 提前初始化全局统计变量 #

在发起所有请求前固定好总请求数，不要在循环逻辑里重复计算：

// 固定总请求数
const totalRequests = val['id_count'];
let finishedRequests = 0; // 计数：已走完流程（含成功、失败）的请求数
let successCount = 0; // 计数：请求成功的数量
// 缓存进度条DOM，避免重复查询
const $progressBar = $('.progress-bar');
// 进度条初始状态重置
$progressBar.css('width', '0%');
$progressBar.attr('aria-valuenow', 0);
$progressBar.text(`0% (0/${totalRequests})`);

2. 修复循环作用域，统一在请求完成时更新进度 #

循环遍历时用块级作用域隔离变量，依靠jQuery AJAX的complete回调触发进度更新——这个回调无论请求成功还是失败都会执行，不会出现进度条卡在99%不动的问题：

// 用let声明循环变量，隔离每次遍历的作用域
for (let x = 1; x <= totalRequests; x++) {
  $.ajax({
    url: baseUrl + x,
    dataType: "json",
    // 无论请求成功/失败，都触发进度更新
    complete: function() {
      finishedRequests++;
      // 计算进度百分比
      const progressPercent = Math.round((finishedRequests / totalRequests) * 100);
      // 更新进度条样式
      $progressBar.css('width', `${progressPercent}%`);
      $progressBar.attr('aria-valuenow', progressPercent);
      // 更新展示文本：包含已完成百分比、已完成/总请求数；如果需要展示剩余百分比，直接用100 - progressPercent计算追加即可
      $progressBar.text(`${progressPercent}% (${finishedRequests}/${totalRequests})`);
      // 所有请求完成时的收尾逻辑
      if (finishedRequests === totalRequests) {
        $("#message").html(`请求全部完成：共发起${totalRequests}个，成功${successCount}个，失败${totalRequests - successCount}个`);
      }
    },
    success: function(results) {
      successCount++;
      // 放置原有请求成功后的业务逻辑
    },
    error: function(xhr, status, error) {
      $("#message").html("data: " + status + " " + error);
    }
  })
}

关键实现说明 #

• 本方案不需要自定义XHR对象：因为需求是统计整个批次的请求完成进度，不是单个请求的文件传输进度，监听每个请求的完成状态即可实现需求，自定义XHR反而会引入不必要的复杂度
• 如果需要调整展示样式，完全可以根据需求自定义进度条内的文本结构，比如拆分百分比、计数、剩余值的展示位置，只要绑定对应的计算值即可
• 注意循环变量一定要用let声明，不要直接用全局变量，否则会因为闭包问题导致所有异步回调拿到的ID值都是循环结束后的最大值，触发不可预知的bug

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