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);

所以基本上，在300ms之后，我在事件队列中有超过1个回调函数。现在，让我们说一段时间后，用户点击某些内容。处理此单击事件，并且回调函数onClick（）也进入事件队列。让我们说第一次去那里，已经有4个setInterval创建的回调函数。由于这是一个与DOM相关的函数，它将重新渲染窗口，它是否优先于这些函数？

在this talk on event loops中，作者提到了一个渲染队列，它优先于回调队列（通过setTimeout和setInterval等方法进行回调）。由于onClick（）执行与渲染相关的操作，它会进入此队列还是进入常规回调队列并等待轮到它？

Answer 1

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

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

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

由于onClick（）执行与渲染相关的事情，它会进入此队列还是进入常规回调队列并等待轮到？

我不相信onclick处理程序必须执行与渲染相关的任何操作。是的，我们大部分时间都是编码的，但我认为它总是不得不改变元素的外观。它可以在后台发送Ajax请求。它可以只记录控制台。你真的不知道。

另请注意，setInterval不会将事件添加到事件队列中以便稍后执行。它等待一段时间，然后将该事件添加到事件队列中。您可以在here上阅读更多内容。

希望我自己也不傻瓜，因为直到几个月前我才开始深入研究JS。如果我关闭任何事情，请告诉我。

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

1 个答案: