为什么我的超时要等到等待完成后，但我的日志没有？

Question

如果我有这样的设置：

console.clear();

// noprotect

const fetchSomething = () => new Promise((resolve) => {
    setTimeout(() => resolve('future value'), 500);
});

async function asyncFunction() {
    const result = await fetchSomething();
    console.log('waiting');
    setTimeout(()=>console.log('waiting?'), 250);
    return result + ' 2';
}

asyncFunction().then(result => console.log(result));

我的输出看起来像：

"waiting"
"future value 2"
"waiting?"

我希望waiting? 在结果完成之前执行，但由于某种原因它会等待函数。是什么让一个等待而另一个执行？

Answer 1

这是异步编程的一个特点。

您必须添加 await 并使用返回 Promise 的函数包装您的 setTimeout(()=>console.log('waiting?'), 250); 以使其看起来像是被连续评估。

类似：

await ((ms) =>{
        console.log('waiting?');
        return new Promise(resolve => setTimeout(resolve, ms));
    })(250);

或者：

await (() => new Promise(resolve => setTimeout(()=>{
    console.log('waiting?');
    resolve();
}, 250)))();

请注意，JS 有一个单线程运行时引擎，因此当原始脚本到达结束时它会中断评估。

setTimeout(function, timeout) 中的函数在第一次有机会且时机成熟时由 JS 评估。

所以你的函数被中断了两次，又被恢复了两次。

Answer 2

记录“等待？”的调用在await 完成后由setTimeout 启动，所以在fetchSomething 中的500ms 之后已经过去。它只会在fetchSomething 返回后执行 250 毫秒。这足以让asyncFunction 返回。

如果您想查看不同的行为，请启动计时器以记录“等待？”在调用 await 之前：

async function asyncFunction() {
  setTimeout(()=>console.log('waiting?'), 250);
  const result = await fetchSomething();
  console.log('waiting');
  return result + ' 2';
}