如何让for循环等待异步代码执行完成并按顺序同步运行？

嘿，这个问题我太熟了——异步操作天生就是非阻塞的，所以你的for循环根本不会等functionOne里的异步逻辑跑完，直接就跳去下一次迭代了。不过没关系，我们可以用Promise把回调式的异步代码包装一下，再结合async/await来实现你想要的顺序执行效果。

首先拆解下问题根源：你的functionOne依赖第三方库的异步函数和事件监听，调用后代码会立刻回到for循环继续执行，完全不会等complete事件触发，这就是日志顺序混乱的核心原因。

步骤1：把functionOne包装成Promise版本 #

因为你改不了第三方库的aFunctionThatRunsAsync，所以我们用Promise把它的回调和事件监听逻辑包起来，这样就能用await来等待它完成：

// 重构functionOne，返回Promise代替回调
function functionOne(inp, idx) {
  return new Promise((resolve, reject) => {
    console.log(idx, 'i2'); // 对应你预期里的0 i2
    const processor = aFunctionThatRunsAsync(inp, err => {
      // 第三方库的错误回调，直接reject Promise
      if (err) return reject(err);
    });
    // 监听complete事件，触发时resolve Promise并传递数据
    processor.on('complete', data => {
      console.log(data, idx, 'i3');
      resolve(data);
    });
  });
}

步骤2：用async/await改造for循环 #

把循环放在一个异步函数里，用await等待每一次functionOne执行完成，这样循环就会严格按顺序走：

// 异步函数包裹循环逻辑
async function processArray(arr) {
  // 用for...of遍历数组（比for...in更适合数组，避免非索引属性的问题）
  for (let [idx, item] of arr.entries()) {
    console.log(idx, 'i1'); // 对应你预期里的0 i1
    try {
      // 等待functionOne完成后再进入下一次循环
      const res = await functionOne(item, idx);
      console.log(res); // 原来回调里的console.log(res)移到这里
    } catch (err) {
      // 处理异步过程中的错误
      console.error('处理出错:', err);
    }
  }
}

// 调用这个异步函数启动处理
processArray(arr);

为什么这样能解决问题？ #

• Promise包装：把原来基于回调和事件的异步逻辑转换成了可以被await识别的异步对象，只有当complete事件触发时，Promise才会“完成”，await才会放行。
• async/await：让异步代码看起来像同步代码一样顺序执行，每一次循环都会等到上一次的异步操作（包括complete事件处理）全部完成后，才会开始下一次迭代。

如果你坚持用for...in遍历 #

如果一定要用for...in（不推荐遍历数组时用，因为会遍历到数组的非索引属性），也可以调整一下：

async function processArray(arr) {
  for (let i in arr) {
    const idx = Number(i); // 把字符串索引转成数字
    console.log(idx, 'i1');
    try {
      const res = await functionOne(arr[idx], idx);
      console.log(res);
    } catch (err) {
      console.error('处理出错:', err);
    }
  }
}

这样改完之后，你就能得到完全符合预期的日志顺序：

0 i1
0 i2
data(obj) 0 i3
[obj] // 这里是res的输出
1 i1
1 i2
data(obj) 1 i3
[obj]

内容的提问来源于stack exchange，提问作者m-ketan