javascript - 为什么我的脚本在 JS 中被事件处理程序中断

Question

我已阅读以下主题 is-javascript-guaranteed-to-be-single-threaded那里有一个很好的例子:

<textarea id="log" rows="20" cols="40"></textarea>
<input id="inp">
<script type="text/javascript">
    var l= document.getElementById('log');
    var i= document.getElementById('inp');
    i.onblur= function() {
        l.value+= 'blur\n';
    };
    setTimeout(function() {
        l.value+= 'log in\n';
        l.focus();
        l.value+= 'log out\n';
    }, 100);
    i.focus();
</script>

输出为

log in
blur
log out

与预期不同

log in
log out
blur

所以这基本上表明我的 blur 事件处理程序被触发，这中断了 setTimeout 回调中代码的执行。我读过几篇其他文章和解释，指出代码不会被中断( run-to-completion principle )，除了一些极端情况，如模式弹出窗口(警报、提示窗口)。那么为什么在示例中会被中断呢？

我能想到的唯一解释是，我从代码中手动触发 focus 事件，同时执行的控制权在 JS 引擎上。如果不手动触发，代码执行过程中的模糊事件会被浏览器检测到并放入队列中，只有在代码执行完成(堆栈为空)后才会处理。

Answer 1

正如您链接到的问题中所述:

Browsers will fire these [events] right away when your code does something to cause them:

在上面的示例中，聚焦于某个元素会导致先前获得焦点的元素立即发生模糊事件。该事件不会排队，而是立即触发。实际上，focus() 方法直接调用先前聚焦元素的 blur 监听器。

立即执行此操作很有用，这样 blur 处理程序就可以确保能够访问留下的元素的当前状态；我们不想让其他代码有机会先更改该字段。