大致介紹

今天看了一篇文章，覺(jué)得寫得不錯(cuò)，所以學(xué)習(xí)了一下，這篇博客是我自己的理解和總結(jié)

原文：你應(yīng)該知道的 setTimeout 秘密

主要內(nèi)容：

　1、setTimeout原理

　2、setTimeout(function(){..},0)的意義

　3、setTimeout的this指向和參數(shù)問(wèn)題

setTimeout原理

先來(lái)看一段代碼：

var start = new Date();
 setTimeout(function(){
  console.log(new Date() - start);
 },500);
 while(new Date() - start <= 1000 ){}

最后輸出的是1003（可能數(shù)字不同，但是都大于1000）

之所以會(huì)輸出這樣的數(shù)，是因?yàn)閳?zhí)行到setTimeout時(shí)，會(huì)把其中的代碼經(jīng)過(guò)500ms后放到執(zhí)行隊(duì)列中，但是之后執(zhí)行while循環(huán)，while循環(huán)會(huì)占據(jù)計(jì)算機(jī)資源，要占據(jù)1000ms，在這1000ms中執(zhí)行隊(duì)列中的任務(wù)都得等待，直到while循環(huán)結(jié)束

可以看出setTimeout的原理就是在經(jīng)過(guò)給定的時(shí)間后，將任務(wù)添加到隊(duì)列中，等待cpu調(diào)度執(zhí)行，它并不能保證任務(wù)在什么時(shí)候執(zhí)行

setTimeout(function(){..},0)的意義

有時(shí)候見(jiàn)過(guò)這樣的代碼：

 setTimeout(function(){
  //...........
 },0);

經(jīng)過(guò)前面的學(xué)習(xí)，我會(huì)以為是當(dāng)代碼執(zhí)行到setTimeout時(shí)，會(huì)立即將任務(wù)添加到執(zhí)行隊(duì)列中。其實(shí)不然，雖然給定的延遲執(zhí)行時(shí)間是0，但是setTimeout有自己的最小延遲時(shí)間（根據(jù)瀏覽器的不同而不同），所以即使寫了0s，但是setTimeout還是會(huì)在最小延遲時(shí)間后才添加任務(wù)到執(zhí)行隊(duì)列中

設(shè)置為0s的作用是為了可以改變?nèi)蝿?wù)的執(zhí)行順序！因?yàn)闉g覽器會(huì)在執(zhí)行完當(dāng)前任務(wù)隊(duì)列中的任務(wù)，再執(zhí)行setTimeout隊(duì)列中積累的的任務(wù)

例如：

window.onload = function(){
 document.querySelector('#one input').onkeydown = function(){
  document.querySelector('#one span').innerHTML = this.value;
 };
 document.querySelector('#two input').onkeydown = function(){
  setTimeout(function(){
  document.querySelector('#two span').innerHTML = document.querySelector('#two input').value;
  },0)
 }
 }

會(huì)產(chǎn)生這樣的問(wèn)題：

可以發(fā)現(xiàn)采用第一種寫法時(shí)，只會(huì)獲取到鍵盤按下前，輸入框中的內(nèi)容

產(chǎn)生問(wèn)題的原因是當(dāng)我們按下鍵盤時(shí)，JavaScript引擎會(huì)執(zhí)行keydown的事件處理程序，而更新輸入框中的值是在此之后執(zhí)行的，所以當(dāng)獲取輸入框中的值（this.value）時(shí)，輸入框中的值還為更新。

解決方法就是利用setTimeout，在更新了輸入框的值后，在獲取它的值

setTimeout的this指向和參數(shù)問(wèn)題

setTimeout中回調(diào)函數(shù)的this是指向window的

例如：

var a = 1;
 var obj = {
  a : 2,
  output : function(){
  setTimeout(function(){
   console.log(a);
  },0);
  }
 }
 obj.output(); //1

但我們可以利用apply()、call()和bind()來(lái)改變this的指向

在setTimeout通常是兩個(gè)參數(shù)，但是它可以由多個(gè)參數(shù)

例如：

 setTimeout(function(a,b){
  console.log(a); //2
  console.log(b); //4
  console.log(a + b); //6
 },0,2,4);

可以看到，這些多的參數(shù)就是回調(diào)函數(shù)中要傳入的參數(shù)

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論