這篇文章主要介紹了淺談Javascript線程及定時機制的相關資料,需要的朋友可以參考下
setTimeout、setInterval的使用
Javascript api文檔
比如
?
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>新聞熱點
疑難解答