jQuery中点击全选复选框触发多Ajax请求后如何识别最后请求结束隐藏加载器

问题根因 #

你当前数组每次长度为1是因为AjaxCall变量的作用域配置错误，你应该是将变量声明放在了单个Ajax请求的逻辑内部，每次发起请求都会重新初始化空数组，导致每次push后长度只能为1。

解决方案1：手动计数（兼容性最好） #

全选点击时先统计总请求数，在请求外层作用域声明计数变量和结果存储数组，每次请求完成后更新计数，计数等于总请求数时隐藏加载器，参考代码如下：

// 全选复选框点击事件
$("#selectAll").on("click", function() {
  // 显示加载器
  $("#loading").show();
  // 获取所有子复选框节点
  const $childCheckboxes = $(".child-checkbox");
  // 总Ajax调用次数等于子复选框总数
  const totalRequest = $childCheckboxes.length;
  // 已完成请求计数、结果存储数组都放在请求逻辑的上层作用域
  let finishedCount = 0;
  const AjaxCall = [];

  // 遍历发起单个请求
  $childCheckboxes.each(function() {
    const currentId = $(this).val(); // 按需替换为你需要提交的参数
    $.ajax({
      url: "你的业务接口地址",
      type: "POST",
      data: { id: currentId },
      success: function(response) {
        if (response.isSuccess) {
          AjaxCall.push(response.id);
          // 其他成功逻辑
        } else {
          // 错误提示逻辑
        }
      },
      complete: function() {
        // 无论请求成功/失败都更新计数，避免出错后加载器永久显示
        finishedCount++;
        // 所有请求完成时执行逻辑
        if (finishedCount === totalRequest) {
          $("#loading").hide();
          // 此时AjaxCall存储了所有成功请求的id，totalRequest就是总调用次数
          console.log("所有请求执行完毕，总调用次数：", totalRequest, "成功请求列表：", AjaxCall);
        }
      }
    })
  })
})

解决方案2：Promise统一管理（更简洁） #

如果项目环境支持ES6+语法，可以用Promise.allSettled统一监听所有请求的完成状态，无需手动维护计数，参考代码如下：

$("#selectAll").on("click", async function() {
  $("#loading").show();
  const $childCheckboxes = $(".child-checkbox");
  // 生成请求数组
  const requestList = $childCheckboxes.map(function() {
    const currentId = $(this).val();
    return $.ajax({
      url: "你的业务接口地址",
      type: "POST",
      data: { id: currentId }
    })
  }).get();
  const totalRequest = requestList.length; // 总调用次数

  try {
    // 等待所有请求完成
    const allResponse = await Promise.allSettled(requestList);
    // 筛选成功的请求id
    const AjaxCall = allResponse
      .filter(item => item.status === 'fulfilled' && item.value.isSuccess)
      .map(item => item.value.id);
    console.log("总调用次数：", totalRequest, "成功请求列表：", AjaxCall);
  } catch (err) {
    // 全局错误处理
  } finally {
    // 所有请求完成后隐藏加载器
    $("#loading").hide();
  }
})

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