JavaScript中setTimeout的那些事兒

更新時(shí)間：2016年11月14日 10:27:25 投稿：lijiao

JavaScript中setTimeout的那些事兒到底有什么？setTimeout單線程、延遲時(shí)間等，感興趣的小伙伴們可以參考一下

一、setTimeout那些事兒之單線程

一直以來(lái)，大家都在說(shuō)Javascript是單線程，瀏覽器無(wú)論在什么時(shí)候，都且只有一個(gè)線程在運(yùn)行JavaScript程序。

但是，不知道大家有疑問(wèn)沒(méi)——就是我們?cè)诰幊踢^(guò)程中的setTimeout(類似的還有setInterval、Ajax)，不是異步執(zhí)行的嗎？?。?nbsp;

例如：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   console.log("a");
   //利用setTimeout延遲執(zhí)行匿名函數(shù)
   setTimeout(function(){
    console.log("b");
   },100);
   console.log("c");
  </script>
 </body>
</html>

運(yùn)行代碼，打開(kāi)chrome調(diào)試器，得如下結(jié)果

這個(gè)結(jié)果很容易理解，因?yàn)槲襰etTimeout里的內(nèi)容是在100ms后執(zhí)行的嘛，當(dāng)然是先輸出a，再輸出c，100ms后再輸出setTimeout里的b嘛。

咦，那Javascript這不就不是單線程了嘛，這不就可以實(shí)現(xiàn)多線程了？?。?nbsp;

其實(shí)，不是的。setTimeout沒(méi)有打破JavaScript的單線程機(jī)制，它其實(shí)還是單線程。

為什么這么說(shuō)呢，那就得理解setTimeout到底是個(gè)怎么回事。

請(qǐng)看下面的代碼，猜結(jié)果:

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   var date = new Date();
   //打印才進(jìn)入時(shí)的時(shí)間
   console.log('first time: ' + date.getTime());
   //一秒后打印setTimeout里匿名函數(shù)的時(shí)間
   setTimeout(function(){
    var date1 = new Date();
    console.log('second time: ' + date1.getTime() );
    console.log( date1.getTime() - date.getTime() );
   },1000);
   //重復(fù)操作
   for(var i=0; i < 10000 ; i++){
    console.log(1);
   }
  </script>
 </body>
</html>

看了上面的代碼，猜猜輸出的結(jié)果是多少呢？1000毫秒？

我們打開(kāi)chrome調(diào)試器，見(jiàn)下圖

納尼，怎么不是1000毫秒呢？?。?！

我們?cè)倏纯聪旅娴拇a：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   //一秒后執(zhí)行setTimeout里的匿名函數(shù)，alert下
   setTimeout(function(){
    alert("monkey");
   },1000);
   while(true){};
  </script>
 </body>
</html>

運(yùn)行代碼后！

怎么一直刷新，瀏覽器卡死了呢，并且沒(méi)有alert！！

按道理，即使我while無(wú)限循環(huán)，在1秒后也得alert一下啊。

種種問(wèn)題皆一個(gè)原因，JavaScript是單線程 。

要記住JavaScript是單線程，setTimeout沒(méi)有實(shí)現(xiàn)多線程，它背后的真相是這樣滴：

JavaScript引擎是單線程運(yùn)行的,瀏覽器無(wú)論在什么時(shí)候都只且只有一個(gè)線程在運(yùn)行JavaScript程序。

瀏覽器的內(nèi)核是多線程的，它們?cè)趦?nèi)核控制下相互配合以保持同步，一個(gè)瀏覽器至少實(shí)現(xiàn)三個(gè)常駐線程：JavaScript引擎線程，GUI渲染線程，瀏覽器事件觸發(fā)線程。

*JavaScript引擎是基于事件驅(qū)動(dòng)單線程執(zhí)行的，JavaScript引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來(lái)，然后加以處理，瀏覽器無(wú)論什么時(shí)候都只有一個(gè)JavaScript線程在運(yùn)行JavaScript程序。

*GUI渲染線程負(fù)責(zé)渲染瀏覽器界面，當(dāng)界面需要重繪（Repaint）或由于某種操作引發(fā)回流(Reflow)時(shí),該線程就會(huì)執(zhí)行。但需要注意，GUI渲染線程與JavaScript引擎是互斥的，當(dāng)JavaScript引擎執(zhí)行時(shí)GUI線程會(huì)被掛起，GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JavaScript引擎空閑時(shí)立即被執(zhí)行。

*事件觸發(fā)線程，當(dāng)一個(gè)事件被觸發(fā)時(shí)該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待JavaScript引擎的處理。這些事件可來(lái)自JavaScript引擎當(dāng)前執(zhí)行的代碼塊如setTimeout、也可來(lái)自瀏覽器內(nèi)核的其他線程如鼠標(biāo)點(diǎn)擊、Ajax異步請(qǐng)求等，但由于JavaScript的單線程關(guān)系所有這些事件都得排隊(duì)等待JavaScript引擎處理（當(dāng)線程中沒(méi)有執(zhí)行任何同步代碼的前提下才會(huì)執(zhí)行異步代碼）。

so,通過(guò)以上講解，以上種種問(wèn)題迎刃而解。

二、setTimeout那些事兒之延遲時(shí)間為0

當(dāng)setTimeout的延遲時(shí)間為0時(shí)，大家想想它會(huì)怎么執(zhí)行呢？

例如下面的代碼：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   console.log('a');
   setTimeout(function(){
    console.log('b');
   },0);
   console.log('c');
   console.log('d');
  </script>
 </body>
</html>

運(yùn)行代碼結(jié)果如下：

假設(shè)你已經(jīng)知道Javascript單線程的運(yùn)行原理了。那么，可能會(huì)有這樣的疑問(wèn)：setTimeout的時(shí)間為0，都沒(méi)加到處理隊(duì)列的末尾，怎么會(huì)晚執(zhí)行呢？不應(yīng)該立即執(zhí)行嗎？

我的理解是，就算setTimeout的時(shí)間為0，但是它仍然是setTimeout啊，原理是不變的。所以會(huì)將其加入到隊(duì)列末尾，0秒后執(zhí)行。

況且，經(jīng)過(guò)查找資料發(fā)現(xiàn)，setTimeout有一個(gè)最小執(zhí)行時(shí)間，當(dāng)指定的時(shí)間小于該時(shí)間時(shí)，瀏覽器會(huì)用最小允許的時(shí)間作為setTimeout的時(shí)間間隔，也就是說(shuō)即使我們把setTimeout的毫秒數(shù)設(shè)置為0，被調(diào)用的程序也沒(méi)有馬上啟動(dòng)。

這個(gè)最小的時(shí)間間隔是多少呢？

這和瀏覽器及操作系統(tǒng)有關(guān)。在John Resig的《Javascript忍者的秘密》一書中提到–Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在蘋果機(jī)上的最小時(shí)間間隔是10毫秒，在Windows系統(tǒng)上的最小時(shí)間間隔大約是15毫秒），另外，MDC中關(guān)于setTimeout的介紹中也提到，F(xiàn)irefox中定義的最小時(shí)間間隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定義的最小時(shí)間間隔是4毫秒。

說(shuō)了這么多，setTimeout的延遲時(shí)間為0，看來(lái)沒(méi)什么意義嘛，都是放在隊(duì)列后執(zhí)行嘛。

非也，天生我材必有用，就看你怎么用咯。拋磚迎玉下。

1、可以用setTimeout的延遲時(shí)間為0，模擬動(dòng)畫效果哦。

詳情請(qǐng)見(jiàn)下代碼：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <div id="container" style="width:100px;height:100px;border:1px solid black;"></div>
  <div id="btn" style="width:40px;height:40px;line-height:40px;margin-top:20px;background:pink;">click</div>
  <script>
   window.onload = function(){
    var con = document.getElementById('container');
    var btn = document.getElementById('btn'); 
    //Params: i 為起始高度，num為預(yù)期高度
    function render(i, num) {
     i++; 
     con.style.height = i + 'px';
     //亮點(diǎn)在此
     if(i < num){
      setTimeout(function() {
       render(i, num);
      },0);
     }
     else {
      con = null;
      btn = null;
     }
    };
    btn.onclick = function(){
     render(100, 200);
    };
   };
  </script>
 </body>
</html>

由于是動(dòng)畫，所以想看其效果，還請(qǐng)各位看官運(yùn)行下代碼哦。

代碼第19行中，利用setTimeout，在每一次render執(zhí)行完成（給高度遞增1）后，由于Javascript是單線程，且setTimeout里的匿名函數(shù)會(huì)在render執(zhí)行完成后，再執(zhí)行render。所以可以實(shí)現(xiàn)動(dòng)畫效果。

2、可以用setTimeout的延遲時(shí)間為0，實(shí)現(xiàn)捕獲事件哦。

當(dāng)我們點(diǎn)擊子元素時(shí)，我們可以利用setTimeout的特性，來(lái)模擬捕獲事件。

請(qǐng)見(jiàn)如下代碼：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style> 
   #parent {
    width:100px;
    height:100px;
    border:1px solid black;
   } 
   #child {
    width:50px;
    height:50px;
    background:pink;
   }
  </style>
 </head>
 <body>
  <div id="parent">
   <div id="child"></div>
  </div>
  <script>
   //點(diǎn)擊子元素，實(shí)現(xiàn)子元素的事件在父元素觸發(fā)后觸發(fā)
   window.onload = function(){
    var parent = document.getElementById('parent'); 
    var child = document.getElementById('child');
    parent.onclick = function(){
     console.log('parent');
    }
    child.onclick = function(){
     //利用setTimeout，冒泡結(jié)束后，最后輸出child
     setTimeout(function(){
      console.log('child'); 
     },0);
    }
    parent = null;
    child = null; 
   }
  </script>
 </body>
</html>

執(zhí)行代碼，點(diǎn)擊粉紅色方塊，輸出結(jié)果：

三、setTimeout那些事兒之this

說(shuō)到this，對(duì)于它的理解就是：this是指向函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象，倘若沒(méi)有明確的當(dāng)前對(duì)象，它就是指向window的。

好了，那么我們來(lái)看看下面這段代碼：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   var name = '!!';
   var obj = {
    name:'monkey',
    print:function(){
     console.log(this.name);
    },
    test:function(){
     //this.print
     setTimeout(this.print,1000);
    }
   }
   obj.test();
  </script>
 </body>
</html>

通過(guò)chrome調(diào)試器，查看輸出結(jié)果：

咦，它怎么輸出的是”!!”呢？不應(yīng)該是obj里的”monkey”嗎？??！

這是因?yàn)閟etTimeout中所執(zhí)行函數(shù)中的this，永遠(yuǎn)指向window。

不對(duì)吧，那上面代碼中的setTimeout(this.print,1000)里的this.print怎么指向的是obj呢？??！

注意哦，我這里說(shuō)的是“延遲執(zhí)行函數(shù)中的this”，而不是setTimeout調(diào)用環(huán)境下的this。

什么意思？

setTimeout(this.print,1000)，這里的this.print中的this就是調(diào)用環(huán)境下的；

而this.print=function(){console.log(this.name);}，這個(gè)匿名函數(shù)就是setTimeout延遲執(zhí)行函數(shù)，其中的this.name也就是延遲執(zhí)行函數(shù)中的this啦。

嘿嘿，這下明白了吧。

 var age = 24;
function Fn(){
 this.age = 18;
 setTimeout(function(){
  //this代表window
  console.log(this);
  //輸出24，而不是Fn的18
  console.log(this.age);
 },1000);
}
new Fn();

咦，那有個(gè)疑問(wèn)，比如我想在setTimeout延遲執(zhí)行函數(shù)中的this指向調(diào)用的函數(shù)呢，而不是window？??！我們?cè)撛趺崔k呢。

常用的方法就是利用that。

that？

對(duì)，that。利用閉包的知識(shí)，讓that保證你傳進(jìn)去的this，是你想要的。

詳情見(jiàn)下:

 var age = 24;
function Fn(){
 //that在此
 var that = this;
 this.age = 18;
 setTimeout(function(){
  console.log(that);
  console.log(that.age);
 },1000);
}
new Fn();

還有一種方法就是，利用bind。

如下:

 var age = 24;
function Fn(){
 this.age = 18;
 //bind傳入this
 setTimeout(function(){
  console.log(this);
  console.log(this.age);
 }.bind(this),1000);
}
new Fn();

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: