這篇文章主要介紹了淺談Javascript線程及定時機制的相關資料,需要的朋友可以參考下
setTimeout、setInterval的使用
Javascript api文檔中定義setTimeout和setInterval第二個參數意義分別為間隔多少毫秒后回調函數被執行和每隔多少毫秒回調函數被執行。但隨著工作經驗的積累，我們發現事實并非如此。
比如
- div.onclick=function(){
- setTimeout(function(){
- document.getElementById('input').focus();
- },0);
- }
就解釋不通了，立即執行就立即執行唄，干嘛還要設置個定時兜個圈子呢。
又有一天你寫了下面一段代碼
- setTimeout(function(){while(true){}},100);
- setTimeout(function(){alert('你好');},200);
第一行代碼死循環，結果造成第二行alert始終沒有出現，為啥哩?
單線程or多線程?
原來，Javascript引擎是單線程運行的，瀏覽器只有一個線程在運行JavaScript程序。因為單線程的設計，所以免去了復雜的多線程同步問題。
當設置一個定時的時候，瀏覽器會在設定的時間后將你指定的回調函數插入任務序列，而非立即執行。如果設定定時時間為0，表示立即插入任務序列，而不是立即執行，仍然要等隊列中任務執行完畢，輪到你，你才執行。
所以下面代碼先彈出2，再彈出1
- setTimeout(function(){
- alert(1);
- },0);
- alert(2);
那么，這又有什么實際用途呢?且看下面示例
- <!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之后執行，所以內容就能實時顯示了。
再回來看看下面的代碼：
- setTimeout(function(){
- //do something...
- setTimeout(arguments.callee,10);
- },10);
- setInterval(function(){
- //do something...
- },10);
這兩段代碼看起來效果一樣，是不是。其實還是有區別的，第一段的回調函數內的setTimeout是js引擎執行后再設定的新的定時，假定從上一個回調處理完到下一個回調開始為一個時間間隔，理論上時間間隔>=10ms，后一段代碼<=10ms。
說到這兒，那XMLHttpRequest是不是真的異步呢?是的，請求是異步的，不過這請求是瀏覽器新開的一個線程。當請求的狀態變更時，如果先前已設置回調，異步線程就將狀態變更事件放入js引擎處理隊列中等待處理，當任務被處理時js引擎始終還是單線程地執行onreadystatechange所設置的函數的。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
圖片精選
