快捷導(dǎo)航

淺談Javascript線程及定時機制

更新時間：2015年07月02日 12:02:23 投稿：hebedich

這篇文章主要介紹了淺談Javascript線程及定時機制的相關(guān)資料,需要的朋友可以參考下

setTimeout、setInterval的使用

　　Javascript api文檔中定義setTimeout和setInterval第二個參數(shù)意義分別為間隔多少毫秒后回調(diào)函數(shù)被執(zhí)行和每隔多少毫秒回調(diào)函數(shù)被執(zhí)行。但隨著工作經(jīng)驗的積累，我們發(fā)現(xiàn)事實并非如此。

　　比如

div.onclick=function(){
  setTimeout(function(){
     document.getElementById('input').focus(); 
  },0);
}

就解釋不通了，立即執(zhí)行就立即執(zhí)行唄，干嘛還要設(shè)置個定時兜個圈子呢。

　　又有一天你寫了下面一段代碼

setTimeout(function(){while(true){}},100);
setTimeout(function(){alert('你好');},200);

第一行代碼死循環(huán)，結(jié)果造成第二行alert始終沒有出現(xiàn)，為啥哩？

單線程or多線程?
　　原來，Javascript引擎是單線程運行的，瀏覽器只有一個線程在運行JavaScript程序。因為單線程的設(shè)計，所以免去了復(fù)雜的多線程同步問題。

　　當(dāng)設(shè)置一個定時的時候，瀏覽器會在設(shè)定的時間后將你指定的回調(diào)函數(shù)插入任務(wù)序列，而非立即執(zhí)行。如果設(shè)定定時時間為0，表示立即插入任務(wù)序列，而不是立即執(zhí)行，仍然要等隊列中任務(wù)執(zhí)行完畢，輪到你，你才執(zhí)行。

　　所以下面代碼先彈出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>
    輸入字符，但內(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>

　　這個例子中，js引擎需要執(zhí)行keydown事件處理程序，然后更新輸入框的value值。事件處理程序執(zhí)行時，更新value的任務(wù)只能進入隊列等待，所以keydown事件執(zhí)行時無法得到更新后的value值；但通過setTimeout我們把取value的操作放入隊列，并在更新value之后執(zhí)行，所以內(nèi)容就能實時顯示了。

　　再回來看看下面的代碼：

setTimeout(function(){
  //do something...
   setTimeout(arguments.callee,10);
},10);

setInterval(function(){
  //do something...
},10);

這兩段代碼看起來效果一樣，是不是。其實還是有區(qū)別的，第一段的回調(diào)函數(shù)內(nèi)的setTimeout是js引擎執(zhí)行后再設(shè)定的新的定時，假定從上一個回調(diào)處理完到下一個回調(diào)開始為一個時間間隔，理論上時間間隔>=10ms，后一段代碼<=10ms。

　　說到這兒，那XMLHttpRequest是不是真的異步呢？是的，請求是異步的，不過這請求是瀏覽器新開的一個線程。當(dāng)請求的狀態(tài)變更時，如果先前已設(shè)置回調(diào)，異步線程就將狀態(tài)變更事件放入js引擎處理隊列中等待處理，當(dāng)任務(wù)被處理時js引擎始終還是單線程地執(zhí)行onreadystatechange所設(shè)置的函數(shù)的。

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: