JavaScript技术问题：如何暂停循环直至AJAX请求完成？

当然可以做到！不过普通的for循环是同步执行的，它不会主动等待异步的AJAX请求完成。要实现你想要的“每次迭代暂停，等AJAX返回再继续”的效果，我们需要用异步编程的思路来改造代码，下面给你两种实用的实现方式：

方法一：使用递归函数（兼容旧浏览器） #

递归是比较传统的异步顺序执行方案，核心思路是：每次AJAX请求完成后，再触发下一次迭代，直到达到循环次数上限。

// 定义递归函数处理迭代
function loopWithAjax(currentIndex) {
  // 终止条件：当前索引超过上限就停止
  if (currentIndex >= 5) {
    return;
  }
  
  var data = "i=" + currentIndex;
  $.ajax({
    url: '/ajax.php',
    type: 'post',
    data: data,
    success: function(result) {
      // 这里处理请求返回的结果
      console.log('第' + currentIndex + '次请求结果:', result);
      // 请求完成后，递归调用下一次迭代
      loopWithAjax(currentIndex + 1);
    },
    error: function() {
      // 可以在这里处理请求失败的情况，比如重试或者终止
      console.log('第' + currentIndex + '次请求失败');
      loopWithAjax(currentIndex + 1); // 也可以选择不继续，直接return
    }
  });
}

// 启动递归循环
loopWithAjax(0);

方法二：使用async/await（ES6+，代码更简洁） #

如果你的环境支持ES6+语法，async/await会让代码逻辑更清晰，看起来和同步代码差不多，但实际是异步执行的。我们需要先把jQuery的AJAX包装成Promise对象，然后在async函数里用for循环，每次await请求完成：

// 把jQuery AJAX包装成Promise
function ajaxPromise(data) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '/ajax.php',
      type: 'post',
      data: data,
      success: resolve,
      error: reject
    });
  });
}

// 定义async函数执行循环
async function runLoop() {
  for (var i = 0; i < 5; i++) {
    var data = "i=" + i;
    try {
      // 这里会暂停循环，直到AJAX请求返回结果
      var result = await ajaxPromise(data);
      console.log('第' + i + '次请求结果:', result);
    } catch (error) {
      // 处理请求失败的情况
      console.log('第' + i + '次请求失败:', error);
    }
    // 每次请求完成后才会进入下一次循环迭代
  }
}

// 启动循环
runLoop();

对你原有代码的小提示 #

你原来的代码里有两个小问题：

• var data = "i=" + 1;这里应该是i而不是固定的1，否则每次请求的参数都是一样的；
• ajax1.done里的ajax1是未定义的变量，应该用你创建的ajax对象。

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