首頁 > 開發者 > JavaScript
淺談Javascript線程及定時機制
這篇文章主要介紹了淺談Javascript線程及定時機制的相關資料,需要的朋友可以參考下
setTimeout、setInterval的使用
Javascript api文檔中定義setTimeout和setInterval第二個參數意義分別為間隔多少毫秒後回呼函數被執行和每隔多少毫秒回呼函數被執行。但隨著工作經驗的積累，我們發現事實並非如此。
比如
?
| 1 2 3 4 5 |
div.onclick=function(){ setTimeout(function(){ document.getElementById('input').focus(); },0); } |
就解釋不通了，立即執行就立即執行唄，幹嘛還要設定個定時兜個圈子呢。
又有一天你寫了下面一段代碼
?
| 1 2 |
setTimeout(function(){while(true){}},100); setTimeout(function(){alert('你好');},200); |
第一行代碼死迴圈，結果造成第二行alert始終沒有出現，為啥哩?
單線程or多線程?
原來，Javascript引擎是單線程啟動並執行，瀏覽器只有一個線程在運行JavaScript程式。因為單線程的設計，所以免去了複雜的多線程同步問題。
當設定一個定時的時候，瀏覽器會在設定的時間後將你指定的回呼函數插入工作順序，而非立即執行。如果設定定時時間為0，表示立即插入工作順序，而不是立即執行，仍然要等隊列中任務執行完畢，輪到你，你才執行。
所以下面代碼先彈出2，再彈出1
?
| 1 2 3 4 |
setTimeout(function(){ alert(1); },0); alert(2); |
那麼，這又有什麼實際用途呢?且看下面樣本
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>setTimeout 0</title> </head> <body> 輸入字元，但內容卻不能即時顯示<input type="text" onkeydown="show(this.value)"/> <br/> 輸入字元，內容能即時顯示<input type="text" onkeydown="var self=this;setTimeout(function(){show(self.value)},0)"/> <div></div> <script> function show(val){ document.getElementsByTagName("div")[0].innerHTML=val; } </script> </body> </html> |
這個例子中，js引擎需要執行keydown事件處理常式，然後更新輸入框的value值。事件處理常式執行時，更新value的任務只能進入隊列等待，所以keydown事件執行時無法得到更新後的value值;但通過setTimeout我們把取value的操作放入隊列，並在更新value之後執行，所以內容就能即時顯示了。
再回來看看下面的代碼：
?
| 1 2 3 4 5 6 7 8 |
setTimeout(function(){ //do something... setTimeout(arguments.callee,10); },10);
setInterval(function(){ //do something... },10); |
這兩段代碼看起來效果一樣，是不是。其實還是有區別的，第一段的回呼函數內的setTimeout是js引擎執行後再設定的新的定時，假定從上一個回調處理完到下一個回調開始為一個時間間隔，理論上時間間隔>=10ms，後一段代碼<=10ms。
說到這兒，那XMLHttpRequest是不是真的非同步呢?是的，請求是非同步，不過這請求是瀏覽器新開的一個線程。當請求的狀態變更時，如果先前已設定回調，非同步線程就將狀態變更事件放入js引擎處理隊列中等待處理，當任務被處理時js引擎始終還是單線程地執行onreadystatechange所設定的函數的。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
