JavaScript异步函数await执行逻辑疑问：两段代码执行时长为何不同？

先看你给出的代码：

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

async function mult(input) {
  const f = await after5s(3);
  const g = await after5s(4);
  return input * f * g;
}

mult(2).then(value => {
  console.log(value);
});

async function second_mult(input) {
  const f = after5s(3);
  const g = after5s(4);
  return input * await f * await g;
}

second_mult(2).then(value => {
  console.log(value);
});

为什么输出是「5秒后输出24，再过5秒输出另一个24」？ #

核心差异在于两个异步函数里，Promise的启动时机：

1. mult函数的执行流程

• 执行const f = await after5s(3);时，会立刻调用after5s(3)，创建一个需要5秒才会resolve的Promise，代码暂停在这里，**等5秒拿到f的值（3）**后，才会执行下一行。
• 接下来执行const g = await after5s(4);，这时候才调用after5s(4)，再创建一个5秒后resolve的Promise，又等5秒拿到g的值（4）。
• 最后计算2*3*4=24返回。整个过程是串行等待，总共耗时5+5=10秒，所以这个函数的console.log会在10秒后输出。

2. second_mult函数的执行流程

• 先执行const f = after5s(3);，立刻调用after5s(3)启动第一个5秒定时器，同时把Promise赋值给f（这里没有await，代码不会暂停）。
• 紧接着执行const g = after5s(4);，立刻调用after5s(4)启动第二个5秒定时器，把Promise赋值给g。
• 两个定时器同时开始计时，5秒后两个Promise都会resolve。
• 之后执行return input * await f * await g;，await f直接拿到已resolve的3（无需等待），await g拿到已resolve的4，计算后返回24。整个过程只需要等5秒，所以这个函数的console.log会在5秒后输出。

程序启动后，两个函数的执行是并行推进的：

• 5秒后，second_mult的结果先出来，输出第一个24。
• 再过5秒（总共10秒），mult的结果出来，输出第二个24。

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