事件队列中的 DOM 事件优先级答案

【问题标题】：DOM events priority in the event queue事件队列中的 DOM 事件优先级
【发布时间】：2016-01-18 12:23:57
【问题描述】：

假设我有这个代码：

$('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() 也进入事件队列。假设它第一次去那里，已经有 2 个由 setInterval 创建的回调函数。由于这是一个与 DOM 相关的函数，它会重新渲染窗口，它会优先于这些函数吗？

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

【问题讨论】：

"在这个关于事件循环的演讲中......" - 什么演讲？
@Amit 抱歉，我忘了添加链接。固定。
我不记得曾在任何规范或 MDN（“圣经”）中看到过任何此类内容。我假设即使存在这样的事情，它也会依赖于实现。但我不知道是否适合...
我们不能运行您的代码来查看事件的顺序吗 - jsfiddle.net/brettdewoody/Ljmwqof0

标签： javascript callback dom-events

【解决方案1】：

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

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

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

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

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

还请记住，setInterval 不会将事件添加到事件队列中以在稍后的某个时间执行。它等待一段时间，然后将该事件添加到事件队列中。你可以阅读更多关于here的信息。

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

【讨论】：