轉 http://www.52web.com/52article/?view-145.html
摘要: 現有的 JavaScript 引擎是單線程處理任務的。它把任務放到隊列中,不會同步去執行,必須在完成一個任務后才開始另外一個任務。
由 John Resig 的 How JavaScript Timers Work 可以知道,現有的 JavaScript 引擎是單線程處理任務的。它把任務放到隊列中,不會同步去執行,必須在完成一個任務后才開始另外一個任務。
讓我們看看之前的文章:JavaScript的9個陷阱及評點,在第 9 點 Focus Pocus 中提到的問題。原作者對這個認識有所偏差,其實不只是 IE 的問題,而是現有 JavaScript 引擎對于線程實現的問題(關于線程,我的概念其實不多,如果不對,希望讀者多多指教)。我們通過一個關于settimeout的例子來說明,請訪問 http://realazy.org/lab/settimeout.html. 我們來看 1 和 2。如果你能看看源代碼,會發現我們的任務很簡單,就是給文檔增加一個 input 文本框,并聚焦和選中。請現在分別點擊一下,可以看到,1 并沒有能夠聚焦和選中,而 2 可以。它們之間的區別在于,在執行:
- input.focus();
- input.select();
input.focus();
input.select();
時, 2 多了一個延遲時間為 0 的 setTimeout 的外圍函數,即:
- setTimeout(function(){
- input.focus();
- input.select();
- }, 0);
setTimeout(function(){
input.focus();
input.select();
}, 0);
按照 JavaScript: The Definitive Guide 5th 的 14.1 所說:
在實踐中,setTimeout 會在其完成當前任何延宕事件的事件處理器的執行,以及完成文檔當前狀態更新后,告訴瀏覽器去啟用 setTimeout 內注冊的函數。
其實,這是一個把需要執行的任務從隊列中跳脫的技巧。回到前面的例子,JavaScript 引擎在執行 onkeypress
時,由于沒有多線程的同步執行,不可能同時去處理剛創建元素的 focus 和 select 事件,由于這兩個事件都不在隊列中,在完成
onkeypress 后,JavaScript 引擎已經丟棄了這兩個事件,正如你看到的例子 1 的情況。而在例子 2
中,由于setTimeout可以把任務從某個隊列中跳脫成為新隊列,因而能夠得到期望的結果。
這才是延遲事件為 0 的setTimeout的真正目的。在此,你可以看看例子
3,它的任務是實時更新輸入的文本,現在請試試,你會發現預覽區域總是落后一拍,比如你輸 a, 預覽區并沒有出現 a, 在緊接輸入 b 時, a
才不慌不忙地出現。其實我們是有辦法讓預覽區跟輸入框同步地,在此我沒有給出答案,因為上面所說的,就是解決思路,try it yourself!