jQuery each循环中如何等待Ajax请求完成后再继续下一轮循环

你可以通过以下两种方案实现按顺序发送异步请求，全程不会阻塞页面交互：

方案1：递归串行执行（兼容所有支持jQuery的浏览器） #

核心逻辑是将选中的复选框转为数组，每完成一个请求再递归调用处理下一个元素：

// 先将选中的复选框转为普通数组
const checkedOptions = $('input[name="options[]"]:checked').toArray();

// 递归请求函数
function sendRequest(index) {
  // 所有请求处理完毕直接结束
  if (index >= checkedOptions.length) return;

  const name = $(checkedOptions[index]).val();
  jQuery.ajax({
    url: "www.example.com",
    type: "POST",
    data: {
      name: name
    },
    success: function(data) {
      // 原有业务处理逻辑
      // do something
      // 上一个请求成功后触发下一个请求
      sendRequest(index + 1);
    },
    error: function(err) {
      // 错误逻辑可自定义：如果需要出错仍继续后续请求，可在此处调用sendRequest(index + 1)
    }
  });
}

// 启动第一个请求
sendRequest(0);

方案2：async/await 实现（适配现代浏览器，代码更简洁） #

jQuery.ajax 本身返回类Promise对象，可直接结合async/await实现串行等待：

async function batchSendRequest() {
  const checkedOptions = $('input[name="options[]"]:checked');
  // 用for循环替代each，可实现await等待逻辑
  for (let item of checkedOptions) {
    const name = $(item).val();
    try {
      // 等待当前请求完成后再进入下一轮循环
      const data = await jQuery.ajax({
        url: "www.example.com",
        type: "POST",
        data: {
          name: name
        }
      });
      // 原有success业务处理逻辑
      // do something
    } catch (err) {
      // 错误处理逻辑
    }
  }
}

// 调用执行批量请求
batchSendRequest();

两种方案均为纯异步执行，不会阻塞JS主线程，页面渲染、用户交互全程不受影响。可根据项目的浏览器兼容要求选择对应方案。

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