jQuery each方法触发Ajax后页面提前刷新，如何等待请求完成再重载？

哈哈，这个坑我踩过！你现在的代码逻辑是遍历按钮触发点击（进而发起Ajax），然后立刻刷新页面——但Ajax是异步的啊，循环刚结束，所有请求可能还在半路跑着呢，页面就直接刷新了，根本等不到请求完成。

核心思路是：跟踪所有Ajax请求的状态，等全部完成后再执行页面刷新。jQuery的Ajax请求返回的jqXHR对象兼容Promise接口，所以我们可以用Promise.all（或Promise.allSettled）来统一等待所有请求结束。

方案1：如果按钮的click事件已返回jqXHR #

如果你的按钮点击事件是这样写的（返回了Ajax请求的jqXHR对象）：

$(":button[attributeFoo=\"bar\"]").on('click', function() {
  // 注意这里return了$.ajax的结果
  return $.ajax({
    url: '/your-api-endpoint',
    method: 'POST',
    // 其他Ajax配置
  });
});

那你只需要修改原有代码，收集所有click触发的Ajax Promise，再用Promise.all等待：

// 收集所有Ajax请求的Promise
const ajaxPromises = [];

$(":button[attributeFoo=\"bar\"]").each(function() {
  // 触发点击并获取返回的jqXHR（兼容Promise）
  const request = $(this).click();
  ajaxPromises.push(request);
});

// 等待所有Ajax请求成功完成后刷新页面
Promise.all(ajaxPromises)
  .then(() => {
    console.log('所有Ajax请求都完成了！');
    location.reload(true);
  })
  .catch(error => {
    console.error('有一个Ajax请求失败了:', error);
    // 这里可以根据需求决定：失败后要不要刷新？
    // 比如即使失败也要刷新，就把location.reload(true)放在这里
  });

方案2：如果按钮的click事件没有返回jqXHR #

如果原来的click事件没有返回Ajax对象（比如直接写$.ajax()没return），那更稳妥的方式是直接在循环里发起Ajax请求，而不是通过点击触发，这样能直接控制Promise的收集：

const ajaxPromises = [];

$(":button[attributeFoo=\"bar\"]").each(function() {
  // 从按钮上获取所需参数（比如data属性）
  const buttonData = $(this).data('request-param');
  
  // 发起Ajax并收集Promise
  const request = $.ajax({
    url: '/your-api-endpoint',
    method: 'POST',
    data: { param: buttonData },
    // 其他配置
  });
  ajaxPromises.push(request);
});

// 等待所有请求完成
Promise.all(ajaxPromises)
  .then(() => location.reload(true))
  .catch(err => console.error('请求出错:', err));

进阶：允许部分请求失败后仍刷新页面 #

如果你希望不管请求成功还是失败，都等所有请求结束后再刷新，可以用Promise.allSettled代替Promise.all——它会等待所有Promise都完成（不管fulfilled还是rejected）：

Promise.allSettled(ajaxPromises)
  .then(results => {
    // 可以遍历results查看每个请求的状态
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`第${index+1}个请求成功:`, result.value);
      } else {
        console.log(`第${index+1}个请求失败:`, result.reason);
      }
    });
    // 所有请求都结束了，刷新页面
    location.reload(true);
  });

关键知识点 #

• Ajax是异步操作，同步代码（比如location.reload）不会等待异步任务完成
• jQuery的jqXHR对象实现了Promise接口，可以直接用在原生Promise的方法里
• Promise.all：所有Promise都成功才进入then，第一个失败就进入catch
• Promise.allSettled：所有Promise都完成（无论成败）才进入then

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