调用异步函数时如何等待操作

Question

我正在练习使用 Adaface 进行面试评估 (https://www.adaface.com/assessment-test/javascript-online-test)。

问题是这段代码的输出是什么：

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);
});

我认为这个问题的答案是，它等待10秒并输出24，然后等待5秒输出另一个24，但他们说正确的答案是：5秒后24，再过5秒，另一个24.

我不明白这个 javascript 问题的答案，有人可以解释一下吗？

Answer 1

我认为这个问题的答案是等待10秒并输出24，然后等待5秒再输出24

他们希望您注意的微妙部分是，并未等待“顶级”操作。 所以你是对的，这需要 10 秒：

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

你是对的，这需要 5 秒：

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

但是，它们都被“立即”调用并且都开始等待。  因此，5 秒后，后一个打印其输出，然后在

另一个

5 秒（总共 10 秒）后，前一个打印其输出。 关于后一种情况的更多细节...

这里确实有两个

---

await

操作：

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

但是他们的不同之处（也许是他们希望你在面试中注意到的另一个微妙的事情）是他们在操作被调用之后

等待。 因此，在两个

setTimeout

调用同时（或足够接近）开始计时后。

因此，虽然 从技术上讲

await g

直到

await f 完成之后才会发生，但当我们到达 await g

 时，

setTimeout

 已经完成了。  所以我们正在等待的事情现在已经准备好并解决了。

而在前一个示例中，直到第一个操作完全等待并解决之后，才会调用第二个 

setTimeout

 操作。