javascript - JavaScript `await` 什么时候真正等待？

Question

我正在阅读 this article ，并想知道为什么在第一个片段中第二个 wait() 等待第一个 wait() 完成，而在第二个片段中两个 wait() 运行异步？

async function series() {
  await wait(500);
  await wait(500);
  return "done!";
}

async function parallel() {
  const wait1 = wait(500);
  const wait2 = wait(500);
  await wait1;
  await wait2;
  return "done!";
}

function wait(ms) {
  return new Promise(r => setTimeout(r, ms));
}

Answer 1

在你的第一个函数中:

async function series() {
    await wait(500); // 1
    await wait(500); // 2
    return "done!";
}

您是在告诉 JS 在第一个 wait 开始时等待它。
这意味着第二个 wait(500) 无法在第一个完成之前开始:

1. 触发器 wait(500)//1
2. 等待它过去
3. 触发器 wait(500)//2
4. 等待它过去

在第二个函数中:

async function parallel() {
    const wait1 = wait(500); // 1
    const wait2 = wait(500); // 2
    await wait1;
    await wait2;
    return "done!";
}

两个 wait 调用都已开始，在代码被告知等待结果之前。

1. 触发器 wait(500)//1
2. 触发器 wait(500)//2
3. 等待wait1通过，
4. 等待wait2通过

因为 wait1 和 wait2 是紧接着彼此触发的，所以它们实际上是并行运行的。

想象一下:

如果2个人同时启动秒表，如果每个秒表到达10秒之前需要等待，你仍然只需要等待10秒。
另一方面，在 series 函数中，第二个秒表无法在第一个秒表结束之前启动。