如何修改forEach循环，使其等待每个Timeout完成后再执行下一次迭代？

我明白你的困惑啦——forEach和异步函数搭配的时候确实容易踩这个坑！你原来的代码里，forEach根本不会等着你的异步操作完成再走下一轮迭代，而且await setTimeout(...)其实根本没起到等待作用，因为setTimeout本身不返回Promise，await一个undefined相当于直接跳过等待，所以所有定时器会同时启动，2秒后一起打印所有元素。

下面给你两种可行的修改方案，顺便帮你理清楚Promise在这里的作用：

方案一：用for...of循环（最直观） #

for...of会天然等待每一轮的异步操作完成后，再进入下一次迭代，非常适合这种顺序执行的场景：

const MyArray = [1, 2, 3];

async function printInOrder() {
  for (const element of MyArray) {
    // 把setTimeout包装成Promise，让await能真正等待
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log(element);
  }
}

printInOrder();

这里的关键是把setTimeout包装成Promise：new Promise(resolve => setTimeout(resolve, 2000))会在2秒后把Promise状态改为resolved，await会暂停函数执行，直到这个Promise完成，再继续打印元素，完美实现“等2秒打1，再等2秒打2”的效果。

方案二：用reduce链式调用Promise（适配forEach的思路） #

如果你一定要保留类似forEach的遍历方式，可以用reduce把所有异步操作串成一个Promise链：

const MyArray = [1, 2, 3];

MyArray.reduce(async (prevPromise, element) => {
  // 先等上一个异步操作完成
  await prevPromise;
  // 再等2秒
  await new Promise(resolve => setTimeout(resolve, 2000));
  console.log(element);
}, Promise.resolve()); // 初始值是一个已完成的Promise

reduce会从初始的Promise.resolve()开始，每一轮都等待上一轮的Promise完成，再执行当前的等待和打印，这样就把原本并行的异步操作改成了串行。

为什么原来的代码不行？ #

再帮你理清楚核心问题：

• forEach的设计就是遍历数组，同步执行每个回调，它不会关心回调是不是异步函数，也不会等待异步操作完成。
• setTimeout是一个异步API，但它的返回值是定时器ID，不是Promise，所以await setTimeout(...)相当于await undefined，根本不会触发等待逻辑，所有回调里的定时器会同时开始计时。

Promise的作用就是把异步操作包装成可以被await等待的对象，让我们能像写同步代码一样控制异步流程~

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