setTimeout學習小結

本文主要介紹了setTimeout原理；setTimeout(function(){..},0)的意義；setTimeout的this指向和參數問題。具有很好的參考價值，下面跟著小編一起來看下吧

大致介紹

今天看了一篇文章，覺得寫得不錯，所以學習了一下，這篇博客是我自己的理解和總結

原文：你應該知道的setTimeout 秘密

主要內容：

　1、setTimeout原理

(＜)

　3、setTimeout的this指向和參數問題

setTimeout原理

先來看一段代碼：

（可能數字不同，但都大於1000）

之所以會輸出這樣的數，是因為執行到setTimeout時，會把其中的程式碼經過500ms後放到執行佇列中，但是之後執行while循環，while循環會佔據電腦資源，要佔據1000ms，在這1000ms中執行隊列中的任務都得等待，直到while循環結束

可以看出setTimeout的原理就是在經過給定的時間後，將任務添加到隊列中，等待cpu調度執行，它並不能保證任務在什麼時候執行

setTimeout(function(){..},0)的意義有時候見過這樣的程式碼：

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

以為是當程式碼執行到setTimeout時，會立即將任務加入執行佇列。其實不然，雖然給定的延遲執行時間是0，但是setTimeout有自己的最小延遲時間（根據瀏覽器的不同而不同），所以即使寫了0s，但是setTimeout還是會在最小延遲時間後才添加任務到執行佇列中設定為0s的作用是為了可以改變任務的執行順序！因為瀏覽器會在執行完目前任務佇列中的任務，再執行setTimeout佇列中累積的的任務

例如：

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

會產生這樣的問題：

種寫法時，只會取得到鍵盤按下前，輸入框中的內容

產生問題的原因是當我們按下鍵盤時，JavaScript引擎會執行keydown的事件處理程序，而更新輸入框中的值是在此之後執行的，所以當輸入輸入框中的值（this.value）時，輸入框中的值也為更新。

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

setTimeout的this指向和參數問題

setTimeout中回呼函數的this是指向window的

例如：

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)
 }
 }

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

在setTimeout通常是兩個參數，但是它可以由多個參數

例如：

🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜

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

🎜🎜🎜可以看到，這些多的參數就是回調函數中要傳入的參數🎜🎜更多setTimeout學習小結相關文章請關注PHP中文網！ 🎜