JavaScript 异步回调 - Promise 和 setTimeout

Question

这个问题在这里已经有了答案:





Promise vs setTimeout

(6 个回答)



What is the relationship between event loop and Promise [duplicate]

(2 个回答)


去年关闭。




在以下代码中:

setTimeout(() => console.log("hello"), 0);

Promise.resolve('Success!')
  .then(console.log)

在我的理解中应该发生什么:

调用 setTimeout => print hello时间为0时直接添加到回调队列

Promise.resolve => print Success!添加到回调队列

如果我没记错的话，回调队列是 FIFO .
但是代码输出是:

Success!
hello

解释是什么？

Answer 1

有 2 个单独的队列用于处理回调。一个 宏 和 微队列。 setTimeout将 中的项目排入队列宏 队列，同时 promise 解决 - 到 微队列。当前执行的宏任务(在这种情况下是主脚本本身)被同步执行，逐行执行，直到完成。完成的那一刻，循环执行 中排队的所有内容。微任务 在继续 中的下一个项目之前先排队宏 队列(在您的情况下是从 console.log("hello") 排队的 setTimeout )。
基本上，流程如下所示:

脚本开始执行。

宏任务队列:[]，微任务队列:[]。

setTimeout(() => console.log("hello"), 0);遇到这会导致在宏任务队列中推送一个新项目。

宏任务队列:[ console.log("hello") ]，微任务队列:[]。

Promise.resolve('Success!').then(console.log)被读取。 Promise 解析为 Success!立即和 console.log回调被排入微任务队列。

宏任务队列:[ console.log("hello") ]，微任务队列:[ console.log('Success!') ]。

脚本完成执行，因此在继续执行宏队列中的下一个任务之前，它会检查微任务队列中是否有内容。

console.log('Success!')从微任务队列中拉出并执行。

宏任务队列:[ console.log("hello") ]，微任务队列:[]。

脚本再次检查微任务队列中是否还有其他内容。没有，所以它从宏任务队列中取出第一个可用的任务并执行它，即-console.log("hello") .

宏任务队列:[]，微任务队列:[]。

在脚本执行完 console.log("hello") ，它再次检查微任务队列中是否有任何内容。它是空的，所以它检查宏任务队列。它也是空的，所以所有排队的东西都被执行并且脚本完成了。

不过，这是一个简化的解释，因为它可能会变得更棘手。微任务队列通常主要处理 Promise 回调，但您可以自己将代码排入队列。微任务队列中新添加的项仍然会在下一个宏任务项之前执行。此外，微任务可以将其他微任务排入队列，这可能导致处理微任务的无限循环。
一些有用的引用资源:

The event loop

Microtasks

Using Microtasks