📜  异步 JavaScript 中的微任务队列和回调队列有什么区别?

📅  最后修改于: 2022-05-13 01:56:42.609000             🧑  作者: Mango

异步 JavaScript 中的微任务队列和回调队列有什么区别?

要知道两者之间的区别 微任务队列 Callback Queue,我们需要对异步 JavaScript 是如何执行的以及 Microtask Queue 和 Callback Queue 所扮演的角色有一个清晰的认识。

与其他函数或操作并行运行的函数或操作在 JavaScript 中称为异步函数或操作。异步 JavaScript 代码需要在所需时间之后执行的回调函数。

示例:下面的代码说明了 JavaScript 中setTimeout()函数的使用。

Javascript


现在,在这个期望的时间之后,代码需要被传递到调用堆栈,但是这个调用堆栈没有提供一个计时器,我们可以通过它来延迟代码的执行。因此,它使用了 Web API setTimeout()的帮助,该 API 在浏览器的 window 全局对象中可用。一段时间后,调用栈通过事件循环获取代码,事件循环将回调函数提取到调用栈。但是,回调函数不能直接进入事件循环。

那么,微任务队列和回调队列的作用就来了。这些队列充当调解器,一旦计时器到期,回调函数就会连续放入这些队列中。并且只要调用堆栈为空,事件循环就会以 FIFO 顺序将它们提取到调用堆栈。

但是,为了不同的目的,我们需要微任务队列和回调队列。让我们看看它们之间的比较。

回调队列:定时器超时后,回调函数被放入回调队列,事件循环检查调用栈是否为空,如果为空,则将回调队列中的回调函数推送到调用栈,回调函数被移除来自回调队列。然后调用堆栈创建一个执行上下文并执行它。

Microtask Queue: Microtask Queue 类似于 Callback Queue,但 Microtask Queue 具有更高的优先级。所有来自PromisesMutation Observer的回调函数都将进入 Microtask Queue。例如,在 .fetch() 的情况下,回调函数会到达 Microtask Queue。 Promise 处理总是具有更高的优先级,因此 JavaScript 引擎会执行 Microtask Queue 中的所有任务,然后移动到 Callback Queue。

Callback QueueMicrotask Queue
Callback Queue gets the ordinary callback functions coming from the setTimeout() API after the timer expires.Microtask Queue gets the callback functions coming through Promises and Mutation Observer.
Callback Queue has lesser priority than Microtask Queue of fetching the callback functions to Event Loop.Microtask Queue has higher priority than Callback Queue of fetching the callback functions to Event Loop.