爲什麼我的腳本JS的事件處理程序

我已經閱讀了以下主題is-javascript-guaranteed-to-be-single-threaded 打斷還有就是很好的例子有：爲什麼我的腳本JS的事件處理程序

<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引擎上。如果不是手動觸發，代碼執行期間的模糊事件將被瀏覽器檢測到並放入隊列中，只有在代碼執行完成後（堆棧爲空），隊列纔會被處理。

來源

2014-09-11 AngularInDepth.com

這是不是解釋了你從代碼複製的答案？ – Barmar 2014-09-11 09:48:44

嗯，這個問題的答案是，作者將這個例子與模態彈出窗口混合在一起'這些事件不僅僅是因爲你直接調用了focus（），而是因爲你調用了alert（）或者打開了一個pop-窗口或其他任何可以移動焦點的窗口。然後他的大部分答案都與模態彈出窗口有關。然而，第一個例子和模式彈出窗口非常不同。 – 2014-09-11 09:53:08

他在代碼的上方解釋了它：_Browsers會在你的代碼執行某些操作時立即觸發這些代碼：_ – Barmar 2014-09-11 09:54:49

正如問題說明你鏈接到：

在上面的例子中，重點是：

瀏覽器會在您的代碼做一些事情，使他們解僱這些[賽事]馬上一個元素會導致先前擁有焦點的元素上的立即blur事件。此事件沒有排隊，它立即觸發。實際上，focus()方法直接調用以前爲焦點的元素的blur偵聽器。

立即執行此操作很有用，以便blur處理程序可以確保能夠訪問剩餘元素的當前狀態;我們不想讓其他代碼有機會首先更改字段。

來源

2014-09-11 10:03:01 Barmar

謝謝！但是，我提到的解決即時事件的概念，即未添加到隊列中的事件的答案呢？你是否知道任何其他來源可以閱讀有關未添加到隊列中的事件？ – 2014-09-11 10:17:24

我在那裏發表了一個關於它的問題。如果您對答案有疑問，那就應該這樣做，而不是發佈一個新問題。 – Barmar 2014-09-11 10:19:03

我明白了，謝謝。我只是認爲在評論中討論內容並不是一件好事。我會在那裏關注你的評論。 – 2014-09-11 10:26:10

爲什麼我的腳本JS的事件處理程序

回答

相關問題