为什么一个事件循环有一个或多个任务队列？

Question

一个事件循环有一个或多个任务队列。.

根据本规范后面所说的：

任务封装了负责以下工作的算法：

事件：...

解析：...

回调：...

使用资源：...

对 DOM 操作的反应：...

形式上，任务是一个结构，它具有：

步骤：...

来源：....

我可以认为每个事件循环都有一个或多个任务队列，那么作者有很多操作（

Events, Callbacks...

），这些操作将放入相应的任务队列中。

如下图

根据其源字段，每个任务都被定义为来自特定的任务源。对于每个事件循环，每个任务源都必须与特定的任务队列相关联。

例如，用户代理可以有一个任务队列用于鼠标和按键事件（与用户交互任务源相关联），以及另一个与所有其他任务源相关联。然后，使用授予的自由在事件循环处理模型的初始步骤中，它可以在四分之三的时间内优先于其他任务提供键盘和鼠标事件，保持界面响应，但不会使其他任务队列挨饿。请注意，在此设置中，处理模型仍然强制用户代理永远不会乱序处理来自任何一个任务源的事件。

Answer 1

Javascript 是单线程的，它有一个事件循环，其中有一个主任务队列。

浏览器所做的一切都由这个单一队列处理。

如果任务到达队列的前面但还没有准备好执行，它将被循环到队列的后面。

当您发出 ajax 请求时，该请求的回调将被推送到队列中。它将在该队列中重复循环，直到收到响应。一旦收到响应并且回调再次到达队列的前面，回调将执行。

完全相同的事情发生在

setTimeout

和

setInterval

上。

这里有一个很好的事件循环解释：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

您还可以将 微任务 排队，以便在下一个任务退出时运行，引入二级任务队列。在再次继续主队列之前，该队列将被清空。它本质上是主队列中的内部队列，而不是并行队列。

这里是微任务的解释：https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

如果您有兴趣，这里有对事件循环、任务和微任务的深入解释：https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth