這篇文章主要介紹了淺談Javascript線程及定時機制的相關(guān)資料,需要的朋友可以參考下
setTimeout、setInterval的使用
Javascript api文檔
比如
?
1 2 3 4 5 div.onclick=function(){ setTimeout(function(){ document.getElementById('input').focus(); },0); }就解釋不通了,立即執(zhí)行就立即執(zhí)行唄,干嘛還要設(shè)置個定時兜個圈子呢。
又有一天你寫了下面一段代碼
?
1 2 setTimeout(function(){while(true){}},100); setTimeout(function(){alert('你好');},200);第一行代碼死循環(huán),結(jié)果造成第二行alert始終沒有出現(xiàn),為啥哩?
單線程or多線程?
原來,Javascript引擎是單線程運行的,瀏覽器只有一個線程在運行JavaScript程序。因為單線程的設(shè)計,所以免去了復(fù)雜的多線程同步問題。
當設(shè)置一個定時的時候,瀏覽器會在設(shè)定的時間后將你指定的回調(diào)函數(shù)插入任務(wù)序列,而非立即執(zhí)行。如果設(shè)定定時時間為0,表示立即插入任務(wù)序列,而不是立即執(zhí)行,仍然要等隊列中任務(wù)執(zhí)行完畢,輪到你,你才執(zhí)行。
所以下面代碼先彈出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> 輸入字符,但內(nèi)容卻不能實時顯示<input type="text" onkeydown="show(this.value)"/> <br/> 輸入字符,內(nèi)容能實時顯示<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>新聞熱點
疑難解答
圖片精選