如何让jQuery.each()等待内部Ajax请求完成后再执行下一次迭代？

这个场景我太熟悉了——直接在each里套Ajax会一次性发起几十上百个请求，不仅容易触发接口的限流机制，还可能导致浏览器资源占用过高。不用同步请求（毕竟同步会卡死UI）的话，有两种优雅的解决方案：

方法一：递归遍历（兼容旧环境） #

核心思路是先把所有行存成数组，然后写一个递归函数，等当前行的Ajax请求完成后，再调用自身处理下一行，完全异步不阻塞UI：

$("button").click(function () {
  // 将jQuery对象转为普通数组，方便按索引遍历
  const rows = $("#table tbody tr").toArray();
  let currentIndex = 0;

  // 定义递归处理函数
  function handleNextRow() {
    // 所有行处理完毕，退出递归
    if (currentIndex >= rows.length) return;

    const currentRow = rows[currentIndex];
    currentIndex++;

    // 发起Ajax请求
    $.ajax({
      url: "http://api.example.com/?param=value",
      // 可以根据当前行动态传参，比如：
      // url: `http://api.example.com/?param=${$(currentRow).data('id')}`,
      success: function (data) {
        updateUIBasedOnResult(data);
        // 请求成功后，继续处理下一行
        handleNextRow();
      },
      error: function (err) {
        // 务必处理错误，避免某个请求失败导致后续全部卡住
        console.error(`处理第${currentIndex}行失败:`, err);
        // 即使失败也继续下一行，或者根据业务需求改成return终止
        handleNextRow();
      }
    });
  }

  // 启动递归流程
  handleNextRow();
});

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

从jQuery 3.0开始，$.ajax会返回标准的Promise对象，所以我们可以结合ES6的async/await语法，用for...of循环代替each，实现顺序执行：

$("button").click(async function () {
  const rows = $("#table tbody tr").toArray();

  // 用for...of循环配合await，保证每次只处理一行
  for (const row of rows) {
    try {
      // 等待当前Ajax请求完成
      const data = await $.ajax({
        url: "http://api.example.com/?param=value",
        // 同样可以根据当前行动态传参
        // url: `http://api.example.com/?param=${$(row).find('.param').text()}`
      });
      // 请求成功后更新UI
      updateUIBasedOnResult(data);
    } catch (err) {
      console.error(`处理行失败:`, err);
      // 可选：如果某个请求失败就终止后续处理，取消下面的注释
      // break;
    }
  }
});

注意事项 #

• 两种方法都不会阻塞UI，因为所有Ajax请求都是异步的，只是通过递归或await控制了执行顺序
• 一定要处理错误情况，避免单个请求失败导致整个流程中断
• 如果需要给每个请求传递不同的参数（比如每行的ID、内容），可以从当前row元素中提取，动态拼接URL或请求参数

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