如何在$.each()循环中等待模态框关闭后执行下一次迭代

这问题我太熟悉了！$.each()是同步执行的循环，它会一股脑把所有迭代步骤跑完，完全不会等模态框的异步交互（比如用户点击关闭），所以你会发现模态框可能闪一下就跳到最后一个，或者根本看不到前面的内容。要实现等待用户操作后再处理下一项，得把同步循环改成异步逐个处理的方式，下面给你两种实用的解决方案：

方法一：递归函数遍历 #

用递归的方式，每次只处理一个元素，等模态框关闭后再递归调用处理下一个：

function processAsset(index, assets) {
  // 遍历完所有元素就退出
  if (index >= assets.length) return;
  
  const currentAsset = assets[index];
  // 更新模态框里的资产名称
  $('#restore-modal').find('.asset_name').text(currentAsset.relative_name);
  
  // 打开模态框（注意：Bootstrap模态框打开是modal('show')，不是open）
  $('#restore-modal').modal('show').one('hidden.bs.modal', function() {
    // 模态框关闭后，处理下一个资产
    processAsset(index + 1, assets);
  });
}

// 启动遍历，从第一个元素开始
processAsset(0, real_names);

关键细节： #

• 用.one('hidden.bs.modal', ...)而不是.on()，确保每个模态框的关闭事件只触发一次，避免重复绑定导致的异常。
• 递归终止条件是index >= assets.length，防止无限递归。

方法二：用Promise + async/await（更现代的写法） #

如果你的项目支持ES6+语法，可以用Promise包装模态框的关闭事件，配合async/await实现更清晰的异步循环：

async function processAllAssets(assets) {
  for (const asset of assets) {
    // 更新模态框内容
    $('#restore-modal').find('.asset_name').text(asset.relative_name);
    
    // 打开模态框并等待关闭
    await new Promise(resolve => {
      $('#restore-modal').modal('show').one('hidden.bs.modal', resolve);
    });
  }
}

// 启动处理
processAllAssets(real_names);

为什么这个可行？ #

await会暂停for...of循环的执行，直到Promise被resolve（也就是模态框触发hidden.bs.modal事件），这样就实现了“处理一个→等用户操作→处理下一个”的流程。

注意事项 #

• 确认模态框的事件名：如果用的不是Bootstrap模态框，要把hidden.bs.modal换成对应框架的关闭事件（比如自定义模态框可能是close事件）。
• 原代码里的modal('open')大概率是笔误，Bootstrap官方的打开方法是modal('show')，记得修正哦。

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