嵌套AJAX调用循环执行顺序异常问题咨询

这是因为AJAX请求默认是异步非阻塞的，而$().each是同步执行的循环：

• 点击#updateStats后，$.each会一口气遍历完所有.stats-card，同步调用每一个的getStats函数
• 每个getStats里的ajaxCall1会立即发起异步请求，但JavaScript不会等这个请求完成，而是直接继续执行下一轮循环，所以所有ajaxCall1会被批量触发
• 当所有ajaxCall1的请求陆续从服务器返回后，才会逐个进入它们的成功回调，批量触发ajaxCall2
• 同理，所有ajaxCall2请求完成后，才会批量执行showData

如果要实现按元素依次完成全流程（getStats→ajaxCall1→ajaxCall2→showData），可以把遍历改成串行的异步流程，下面提供两种实现方式：

方法1：用async/await + 手动遍历 #

$('#updateStats').click(async function() {
  const $cards = $('.stats-card');
  // 手动逐个遍历，等前一个卡片的全流程完成再处理下一个
  for (let i = 0; i < $cards.length; i++) {
    const $card = $($cards[i]);
    await getStats($card);
  }
});

// 改造getStats为返回Promise的函数
function getStats($card) {
  return new Promise((resolve) => {
    ajaxCall1().then(data1 => {
      ajaxCall2(data1.param).then(data2 => {
        showData($card, data2);
        resolve(); // 当前卡片流程完成，通知下一轮循环启动
      });
    });
  });
}

// 利用jQuery的$.ajax返回的jqXHR对象（本身兼容Promise）改造请求函数
function ajaxCall1() {
  return $.ajax({
    url: '你的第一个API地址',
    method: 'GET'
  });
}

function ajaxCall2(param) {
  return $.ajax({
    url: `你的第二个API地址?param=${param}`,
    method: 'GET'
  });
}

方法2：递归遍历 #

如果不想用async/await，也可以用递归的方式逐个处理元素：

$('#updateStats').click(function() {
  const $cards = $('.stats-card');
  let index = 0;

  function processNextCard() {
    if (index >= $cards.length) return; // 所有卡片处理完成，终止递归
    const $card = $($cards[index]);
    getStats($card, function() {
      index++;
      processNextCard(); // 当前卡片流程走完，处理下一个
    });
  }

  processNextCard();
});

// 改造getStats，添加流程完成后的回调
function getStats($card, callback) {
  ajaxCall1(function(data1) {
    ajaxCall2(data1.param, function(data2) {
      showData($card, data2);
      callback(); // 通知递归可以继续
    });
  });
}

// 改造请求函数为带成功回调的形式
function ajaxCall1(callback) {
  $.ajax({
    url: '你的第一个API地址',
    method: 'GET',
    success: callback
  });
}

function ajaxCall2(param, callback) {
  $.ajax({
    url: `你的第二个API地址?param=${param}`,
    method: 'GET',
    success: callback
  });
}

以上两种方式都能保证每个卡片的全流程完成后，再启动下一个卡片的处理，执行顺序就和你预期的一致了。

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