循环中需等待用户确认后再执行下一次jQuery Ajax请求的问题求助

我现在遇到一个需求：要循环执行10次Ajax调用，每次调用后需要根据响应结果判断是否继续。如果响应满足条件（response.isSuccess为true），就直接进入下一次迭代；如果不满足，就弹出确认框，只有用户点击确认后，才能继续下一次Ajax调用。

目前我的代码里确认弹窗能正常弹出，但问题是用户还没点击确认的时候，下一次Ajax请求已经在后台执行了，这不是我想要的效果。下面是我的代码：

function GetNextBagWeight() {
  let res = "OK";
  var arr = [];

  $.ajax({
    url: '/LoadingControl/GetNextBagWeight?BayId=' + 1,
    cache: false,
    dataType: 'json',
    async: false,
    success: function(response, status, xhr) {
      debugger
      var trHTML = '';
      var count = 1;
      if (response.isSuucess) { // 注意这里拼写：isSuccess？
        trHTML = '<tr><td>' + count + '</td><td>' +
          response.BagWeight + "</td><td>" +
          CurrentDateWithTimeString() + "</td></tr>";
        $('#tblRunTimeBagData').append(trHTML);
        resp = "OK";
        arr.push("OK")
      } else {
        trHTML = '<tr style="background-color: red;"><td>' + count + '</td><td>' +
          response.BagWeight + "</td><td>" +
          CurrentDateWithTimeString() + "</td></tr>";
        $('#tblRunTimeBagData').append(trHTML);
        arr.push("wait")
        if (confirm('Proceed')) {
          alert('Thanks for confirming, start next iteration');
        }
      }
    }
  });
  return res;
}

问题根源 #

你现在应该是用普通for循环调用GetNextBagWeight()，而且给Ajax设置了async: false。虽然同步Ajax会阻塞JS执行，但当confirm弹窗弹出时，浏览器JS线程暂停，可循环会在同步Ajax完成后立刻进入下一次迭代，根本等不到用户完成确认操作，这就导致了下一次请求提前触发的问题。

解决方案：用递归代替循环，实现异步流程控制 #

要解决这个问题，不能用普通循环，得用递归调用的方式，每次完成当前Ajax并处理完用户确认后，再决定是否发起下一次请求。这样能保证完全按顺序执行，且等待用户操作后才继续。

修改后的代码示例：

// 记录当前迭代次数，初始为0
let currentIteration = 0;
// 总执行次数
const totalIterations = 10;

function executeNextIteration() {
  // 先判断是否已完成所有迭代
  if (currentIteration >= totalIterations) {
    console.log('所有迭代已完成');
    return;
  }
  currentIteration++;

  $.ajax({
    url: '/LoadingControl/GetNextBagWeight?BayId=' + 1,
    cache: false,
    dataType: 'json',
    // 建议用异步Ajax，同步会阻塞浏览器UI，体验极差
    async: true,
    success: function(response, status, xhr) {
      var trHTML = '';
      // 用当前迭代次数作为行号更合理
      var count = currentIteration;
      
      // 修正原代码的拼写错误：isSuucess → isSuccess
      if (response.isSuccess) {
        trHTML = `<tr><td>${count}</td><td>${response.BagWeight}</td><td>${CurrentDateWithTimeString()}</td></tr>`;
        $('#tblRunTimeBagData').append(trHTML);
        // 直接执行下一次迭代
        executeNextIteration();
      } else {
        trHTML = `<tr style="background-color: red;"><td>${count}</td><td>${response.BagWeight}</td><td>${CurrentDateWithTimeString()}</td></tr>`;
        $('#tblRunTimeBagData').append(trHTML);
        
        // 等待用户确认
        if (confirm('Proceed?')) {
          alert('Thanks for confirming, starting next iteration');
          // 用户确认后，执行下一次迭代
          executeNextIteration();
        } else {
          // 用户取消，终止所有后续迭代
          console.log('用户已取消，终止迭代');
        }
      }
    },
    error: function(xhr, status, error) {
      // 新增Ajax请求失败的处理逻辑
      console.error('Ajax请求失败:', error);
      if (confirm('请求失败，是否重试当前迭代？')) {
        // 重试当前迭代，次数减1
        currentIteration--;
        executeNextIteration();
      } else {
        console.log('用户取消重试，终止迭代');
      }
    }
  });
}

// 启动第一个迭代
executeNextIteration();

关键改进点： #

• 递归替代循环：每次完成当前请求并处理完用户交互后，主动调用下一次请求，完全控制流程顺序。
• 移除同步Ajax：同步Ajax会阻塞浏览器UI，改成异步Ajax提升用户体验。
• 修正拼写错误：原代码里的isSuucess改为正确的isSuccess，避免逻辑判断失效。
• 迭代次数管理：用currentIteration变量追踪当前执行次数，避免重复或遗漏。
• 新增错误处理：完善Ajax请求失败的分支逻辑，让流程更健壮。

这样修改后，就会严格按照「执行Ajax → 判断结果 → 满足条件直接下一次/不满足则等用户确认后再下一次」的逻辑运行，不会再出现用户未确认就触发下一次请求的问题。

备注：内容来源于stack exchange，提问作者Shahnawaz Khan