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

Question

假设我有这样的代码，那么基本上，在300ms之后，我的事件队列中会有多个回调函数。

$('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);

基本上，在300ms后，事件队列中会有不止一个回调函数。现在，我们假设在一段时间后，一个用户点击了某个东西。这个点击事件会被处理，回调函数onClick()也会进入事件队列里面。假设它第一次进入事件队列时，已经有2个由setInterval创建的回调函数。因为这是一个与DOM相关的函数，会对窗口进行重新渲染，所以它会比这些函数有优先权吗？

在 这个关于事件循环的讲座作者提到了一个渲染队列，它比回调队列有优先权（在这里，类似于 setTimeout 和 setInterval 去）。) 由于 onClick() 做与渲染有关的事情，它会进入这个队列还是进入常规的回调队列，等待轮到自己？

Answer 1

好吧，我想我会试一试，但这些信息对我来说也很陌生。

因为这是一个与DOM相关的函数，它将对窗口进行重新渲染，它是否会比这些函数有优先权？

不，我不相信这个函数本身的优先级会比这些区间内的函数更高。我不认为浏览器本身会知道点击回调会真正改变DOM。回调函数运行后，元素的文本发生了变化，那么浏览器有机会就会重新绘制那个节点。

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

我不相信 onclick 处理程序必须做任何与渲染有关的事情。是的，大多数时候我们都会这样做，但我不认为它总是要改变一个元素的外观。它可以只是在后台发送一个Ajax请求。它可以只是将一些东西记录到控制台。你永远不会真正知道。

另外，请记住 setInterval 并不是将一个事件添加到事件队列中，以便在某个时间后执行。它等待一定的时间，然后将该事件添加到事件队列中。你可以阅读更多关于这个的内容 此处.

希望我没有自作多情，因为我真的是几个月前才开始深入研究JS的。如果我有什么不对的地方请告诉我。