setTimeout和UIEvent顺序

Question

如果一组UIEvents由于脚本中一些长期运行的方法而排队，并且在方法i setTimeout(myfunc, 0)的末尾，相对于以前排队的事件的处理程序，myfunc将被调用什么顺序？是否保证在处理所有以前排队的事件之后调用它？

Answer 1

浏览器中的大多数事件都是通过中心事件队列按FIFO顺序(先入先出)处理的。一些UI事件(如mousemove事件)被折叠，因此您得到了最新的状态，而不一定是所有的中间事件。

因此，问题是鼠标事件何时进入JS事件队列。我不太确定这是如何工作的，所以我建立了几个测试演示。我发现答案取决于。如果UI事件占用了JS线程，那么其他UI事件似乎不会在计时器前进入队列，但是如果UI事件完成，而其他一些操作(而不是UI上的操作)占用CPU，那么evnet将以正确的FIFO顺序排队。因此，看起来“这取决于”(在Chrome中，我到目前为止已经测试过)。

我马上会发到演示的链接..。

这个演示显示，如果CPU占用活动不是响应按钮单击，则在setTimeout()计划启动之前发生的其他按钮单击将在setTimeout()之前进行处理。

long
click
click
click
timeout

但是，在单击事件处理程序按钮中占用CPU的这个演示本身显示的正好相反。在计划启动setTimeout()之前发生的单击没有在此之前得到处理。

long
timeout
click
click
click

现在，我在Firefox中运行了这些程序，并发现在这两种情况下，Firefox都按FIFO顺序处理事件(按实际发生的顺序)。对于上面的第二个演示，这与Chrome不同。

现在，我在IE中运行了这两个程序，并且发现IE总是在UI事件之前处理setTimeout() --与Firefox和Chrome都不一样。

因此，这些测试在三个不同的浏览器中显示了三个不同的结果。

总结结果：

Browser      Hog CPU in Event Handler     Hog CPU after Event Handler
---------------------------------------------------------------------
Chrome 44       timeout first (not FIFO)        FIFO clicks first
Firefox 39      FIFO clicks first               FIFO clicks first
IE 11           timeout first (not FIFO)        timeout first (not FIFO)

作为参考，下面是在单击事件处理程序按钮中占用CPU的测试用例：

document.getElementById("test").addEventListener("click", function() {
    log("click");
});

document.getElementById("long").addEventListener("click", function() {
    log("long");
    setTimeout(function() {
        log("timeout");
    }, 1900)
    // hhog the CPU here before the event handler finishes
    var t = Date.now();
    while (Date.now() - t < 2000) {}
});

下面是在按钮客户端事件处理程序完成后占用CPU的测试用例。

document.getElementById("test").addEventListener("click", function() {
    log("click");
});

document.getElementById("long").addEventListener("click", function() {
    log("long");

    // schedule a setTimeout
    setTimeout(function() {
        log("timeout");
    }, 1900)

    // hog the CPU, but after the UI event has finished
    setTimeout(function() {
        // spin for 2 seconds to hog the JS thread
        var t = Date.now();
        while (Date.now() - t < 2000) {}
    }, 1);
});

Answer 2

在做了一些测试后，我不得不编辑我的答案，因为我是错误的。是的，UI事件确实优先于超时。对于超时，不管设置的顺序是什么，都会首先发生UI事件。