DOM 事件在事件队列中的优先级

Question

假设我有这段代码：

$('button').click(function onClick() {
    $('#divResult').text(Math.rand());
});

setInterval(function timeout() {
    console.log("Hello");
}, 300);

setInterval(function timeout() {
     console.log("Hi");
}, 200);

setInterval(function timeout() {
    console.log("Yo!");
}, 100);

所以基本上，在 300 毫秒之后，我将在事件队列中有不止 1 个回调函数。 现在，假设在一段时间后，用户点击了某些东西。 此点击事件得到处理，回调函数 onClick() 也进入事件队列。 假设它第一次到达那里时，setInterval 已经创建了 2 个回调函数。 由于这是一个与 DOM 相关的函数，它将重新渲染窗口，它会优先于这些函数吗？

在这个关于事件循环的演讲中，作者提到了一个渲染队列，它的优先级高于回调队列（通过setTimeout和setInterval等方法进行的回调）。 既然onClick()做的是渲染相关的事情，那么它是进入这个队列还是进入常规的回调队列等待轮到呢？

Answer 1

好吧，我想我会试一试，但这个信息对我来说也是很新的。

由于这是一个与 DOM 相关的函数，它将重新渲染窗口，它会优先于这些函数吗？

不，我不相信函数本身会比那些区间内的函数有更高的优先级。 我不认为浏览器本身会知道点击回调实际上会改变 DOM。 在回调函数运行并且元素的文本发生更改后，浏览器将在有机会时重新绘制该节点。

既然onClick()做的是渲染相关的事情，那么它是进入这个队列还是进入常规的回调队列等待轮到呢？

我不相信onclick处理程序必须做任何与渲染相关的事情。 是的，大多数时候我们将它编码为，但我认为它并不总是必须改变元素的外观。 它可以在后台发送 Ajax 请求。 它可以将某些内容记录到控制台。 你永远不知道。

还要记住， setInterval不会将事件添加到事件队列中以在稍后的特定时间执行。 它等待一定时间，然后将该事件添加到事件队列中。 您可以在此处阅读更多相关信息。

希望我没有自欺欺人，因为直到几个月前我才真正开始深入研究 JS。 如果我有事请告诉我。