如何等待所有嵌套Ajax与each调用执行完成？

看起来你踩了多层异步操作的经典坑——因为Ajax是异步执行的，你嵌套的两层each里的请求还没全部完成，后续代码就已经跑起来了，这就是为什么断点触发时htmlDivs是空的，等所有请求结束后才会被填满。本质问题是你没有正确等待所有异步请求链完成，就执行了依赖这些请求结果的代码。

下面给你两种最常用的解决方案，根据你的项目环境选择：

1. 用ES6的Promise + async/await（推荐，代码最清晰） #

如果你的项目支持ES6+，这是最直观的写法，把异步请求包装成Promise，然后用async/await让异步代码看起来像同步代码一样按顺序执行：

首先把单个Ajax请求封装成Promise（以jQuery的$.ajax为例）：

// 封装Ajax为Promise
function fetchData(url) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      success: response => resolve(response),
      error: err => reject(err)
    });
  });
}

然后用async函数处理多层遍历和异步请求，注意用for...of代替$.each（因为$.each是同步遍历，不会等待内部异步操作）：

async function processAllContent() {
  const htmlDivs = [];
  // 假设outerData是你外层each遍历的数据源
  for (const outerItem of outerData) {
    // 等待外层Ajax请求完成
    const outerResponse = await fetchData(outerItem.url);
    // 遍历外层返回的数据，处理内层Ajax
    for (const innerItem of outerResponse.data) {
      // 等待内层Ajax请求完成
      const innerResponse = await fetchData(innerItem.url);
      // 处理返回结果，填充htmlDivs
      htmlDivs.push(`<div class="content">${innerResponse.content}</div>`);
    }
  }

  // ********* 这里就是你不希望提前执行的代码 *********
  // 现在所有异步请求都完成了，htmlDivs已经被填满
  console.log(htmlDivs);
  // 后续操作，比如把htmlDivs插入页面
  $('#container').html(htmlDivs.join(''));
}

// 调用函数，别忘了处理错误
processAllContent().catch(error => {
  console.error('请求出错:', error);
});

2. 用jQuery的$.when（兼容旧版jQuery项目） #

如果你的项目还在使用旧版jQuery，可以用jQuery的Deferred对象和$.when来等待多个异步请求完成：

const htmlDivs = [];
const outerDeferreds = [];

// 定义处理单个外层项的函数，返回一个Deferred
function handleOuterItem(outerItem) {
  const innerDeferreds = [];
  
  // 发起外层Ajax
  const outerDeferred = $.ajax({url: outerItem.url})
    .done(function(outerResponse) {
      // 遍历外层返回的数据，发起内层Ajax
      $(outerResponse.data).each(function() {
        const innerDeferred = $.ajax({url: this.url})
          .done(function(innerResponse) {
            // 处理结果，填充htmlDivs
            htmlDivs.push(`<div class="content">${innerResponse.content}</div>`);
          });
        innerDeferreds.push(innerDeferred);
      });
    })
    .then(function() {
      // 等待当前外层项的所有内层Ajax完成
      return $.when.apply($, innerDeferreds);
    });
  
  return outerDeferred;
}

// 外层遍历，收集所有外层项的Deferred
$(outerData).each(function() {
  outerDeferreds.push(handleOuterItem(this));
});

// 等待所有外层和内层的Ajax都完成后，执行后续操作
$.when.apply($, outerDeferreds).done(function() {
  // ********* 这里就是你不希望提前执行的代码 *********
  console.log(htmlDivs);
  $('#container').html(htmlDivs.join(''));
}).fail(function(error) {
  console.error('请求出错:', error);
});

关键注意点 #

• 别用同步的$.each处理异步操作：$.each是同步遍历，它会直接走完所有循环，不会等待内部的Ajax请求完成，所以后续代码会提前执行。
• 必须等待整个异步链完成：多层嵌套的异步需要一层一层等待，要么用async/await的线性写法，要么用Deferred/Promise的链式调用，确保所有数据请求和处理都完成后，再执行依赖这些结果的代码。
• 断点现象的解释：你在标注位置打断点时，所有Ajax请求还在后台等待响应，所以htmlDivs是空的；当你继续执行，浏览器会等待所有异步请求的回调触发，完成htmlDivs的填充，这完全符合异步代码的执行逻辑——你的问题就是没正确等待这些回调完成就执行了后续代码。

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