jQuery .each含AJAX：如何等待函数完成再进入下一次迭代？

这个场景太常见了——默认情况下jQuery的.each()是同步迭代的，但你的populateAccordion里藏着异步AJAX请求，所以会一下子把所有请求都发出去，完全不等前一个面板处理完。要实现串行迭代（处理完一个再下一个），有两种非常实用的方案，我给你详细拆解：

方案一：用递归遍历替代.each() #

核心思路是把循环逻辑改成递归调用，只有当前面板的AJAX请求完成后，才触发下一个面板的处理。

// 先把所有折叠面板元素存到变量里
const $accordionPanels = $('.accordion-panel');
let currentPanelIndex = 0;

// 递归处理下一个面板的函数
function processNextPanel() {
  // 终止条件：所有面板都处理完了
  if (currentPanelIndex >= $accordionPanels.length) {
    console.log('所有面板填充完成！');
    return;
  }

  // 取出当前要处理的面板
  const $currentPanel = $accordionPanels.eq(currentPanelIndex);
  
  // 调用填充函数，等它完成后再处理下一个
  populateAccordion($currentPanel)
    .done(() => {
      currentPanelIndex++;
      processNextPanel();
    })
    .fail((error) => {
      // 可选：处理错误，比如要不要继续下一个面板？
      console.error(`面板${currentPanelIndex}填充失败:`, error);
      currentPanelIndex++;
      processNextPanel();
    });
}

// 关键：把populateAccordion改成返回AJAX的Deferred对象
function populateAccordion($panel) {
  // 从面板里取必要参数，比如ID
  const panelId = $panel.data('panel-id');
  
  return $.ajax({
    url: `/api/panels/${panelId}`,
    method: 'GET'
  }).done((responseData) => {
    // 这里写填充面板的逻辑，比如把数据插入面板
    $panel.find('.panel-content').html(responseData.content);
    console.log(`面板${currentPanelIndex}填充完成`);
  });
}

// 启动串行处理
processNextPanel();

这个方法的优势是逻辑直观，完全贴合你原本的迭代思路，只是把同步循环换成了异步触发的递归。

方案二：用Promise链 + Array.reduce #

如果你更习惯现代Promise的写法，可以把所有面板的处理逻辑串成一条Promise链，用reduce来逐个执行：

const $accordionPanels = $('.accordion-panel');

// 同样要让populateAccordion返回Promise（jQuery的AJAX返回的对象兼容Promise）
function populateAccordion($panel) {
  const panelId = $panel.data('panel-id');
  
  return $.ajax({
    url: `/api/panels/${panelId}`,
    method: 'GET'
  }).then((responseData) => {
    $panel.find('.panel-content').html(responseData.content);
    console.log(`面板填充完成:`, $panel);
    return responseData; // 可选：把当前结果传递给下一个Promise
  }).catch((error) => {
    // 可选：捕获错误后返回resolved的Promise，保证链不中断
    console.error(`面板处理失败:`, $panel, error);
    return Promise.resolve();
  });
}

// 用reduce构建串行Promise链
$accordionPanels.get().reduce((previousPromise, panelElement) => {
  return previousPromise.then(() => {
    return populateAccordion($(panelElement));
  });
}, Promise.resolve()) // 初始Promise，让第一个面板立即开始处理
.then(() => {
  console.log('所有面板都处理完毕！');
})
.catch((globalError) => {
  console.error('整个处理流程出错:', globalError);
});

这个方法更符合现代异步编程的风格，reduce会把每个面板的处理逻辑依次加入Promise链，只有前一个完成后才会执行下一个。

关键注意点 #

1. 必须让populateAccordion返回异步操作的Promise/Deferred对象：这样外部才能监听它的完成状态，控制迭代时机。jQuery的$.ajax本身就返回一个jqXHR对象（属于Deferred，兼容Promise），所以直接返回它就行。
2. 错误处理：如果某个AJAX请求失败，默认会中断整个串行流程。如果想不管失败都继续处理下一个，记得在populateAccordion里用.catch()捕获错误并返回Promise.resolve()。

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