JavaScript 開發者應該知道的 setTimeout 秘密

計時器

setTimeout

是我們經常會用到的，它用於在指定的毫秒數後調用函數或計算表達式。

語法：

setTimeout(code, millisec, args);

注意：如果code為字串，相當於執行

eval()

方法來執行code。

當然，這篇文章並不僅僅告訴你怎麼用

setTimeout

，而且理解其是如何執行的。

1、setTimeout原理

先來看一段程式碼：

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

在上面的程式碼中，定義了一個

setTimeout

定時器，延時時間是500毫秒。

你是不是覺得列印結果是： 500

可事實卻是出乎你的意料，印出結果是這樣的（也許你印出來會不一樣，但肯定會大於1000毫秒）：



這是為毛呢？究其原因，這是因為 JavaScript是單執行緒執行的。也就是說，在任何時間點，有且只有一個執行緒在執行JavaScript程序，無法在同一時候執行多段程式碼。

再來看看瀏覽器下的JavaScript。

瀏覽器的核心是多線程的，它們在核心控制下相互配合以保持同步，一個瀏覽器至少實現三個常駐線程：JavaScript引擎線程，GUI渲染線程，瀏覽器事件觸發線程。

JavaScript引擎

是基於事件驅動單線程執行的，JavaScript引擎一直等待著任務隊列中任務的到來，然後加以處理，瀏覽器無論什麼時候都只有一個JavaScript線程在運行JavaScript程式。

GUI渲染线程

負責渲染瀏覽器介面，當介面需要重繪（Repaint）或因某種操作引發回流(Reflow)時，該執行緒就會執行。但要注意，GUI渲染執行緒與JavaScript引擎是互斥的，當JavaScript引擎執行時GUI執行緒會被掛起，GUI更新會被保存在一個佇列中等到JavaScript引擎空閒時立即執行。

事件触发线程

，當一個事件被觸發時，該線程會把事件加到待處理佇列的隊尾，等待JavaScript引擎的處理。這些事件可來自JavaScript引擎目前執行的程式碼區塊如setTimeout、也可來自瀏覽器核心的其他執行緒如滑鼠點擊、Ajax非同步請求等，但由於JavaScript的單執行緒關係，所有這些事件都得排隊等待JavaScript引擎處理（當執行緒中沒有執行任何同步程式碼的前提下才會執行非同步程式碼）。

到這裡，我們再來回顧一下最初的例子：

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

雖然

setTimeout

的延時時間是500毫秒，可是由於

while

循環的存在，只有當間隔時間大於1000毫秒時，才會跳出while循環，也就是說，在1000毫秒之前，while循環都在佔據JavaScript線程。也就是說，只有等待跳出while後，執行緒才會空閒下來，才會去執行之前定義的setTimeout。

最後，我們可以總結出，

setTimeout

只能保證在指定的時間後將任務(需要執行的函數)插入任務隊列中等候，但是不保證這個任務在什麼時候執行。一旦執行javascript的執行緒空閒出來，自行從佇列中取出任務然後執行它。

因為javascript線程並沒有因為什麼耗時操作而阻塞，所以可以很快地取出排隊隊列中的任務然後執行它，也是這種隊列機制，給我們製造一個非同步執行的假象。

2、setTimeout的好搭檔「0」

也許你看過下面這一段程式碼：

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

上面的程式碼表示立即執行。本意是立刻執行呼叫函數，但事實上，上面的程式碼並不是立即執行的，這是因為setTimeout有一個最小執行時間，當指定的時間小於該時間時，瀏覽器會用最小允許的時間作為setTimeout的時間間隔，也就是說即使我們把setTimeout的延遲時間設為0，被呼叫的程式也沒有馬上啟動。

不同的瀏覽器實際情況不同，IE8和更早的IE的時間精確度是15.6ms。不過，隨著HTML5的出現，在高級版本的瀏覽器（Chrome、ie9+等），定義的最小時間間隔是不得低於4毫秒，如果低於這個值，就會自動增加，並且在2010年及之後發布的瀏覽器中採取一致。

所以說，當我們寫為 

setTimeout(fn,0)

 的時候，實際上是實現插隊操作，要求瀏覽器“盡可能快”的進行回調，但是實際能多快就完全取決於瀏覽器了。

那

setTimeout(fn, 0)

有什麼用處呢？其實實用處就在於我們可以改變任務的執行順序！因為瀏覽器會在執行完目前任務佇列中的任務，然後再執行setTimeout佇列中累積的任務。

透過設定任務在延遲到0s後執行，就能改變任務執行的先後順序，延遲該任務發生，使其非同步執行。

來看一個網路上很流行的例子：

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

`实例：实例

当你往两个表单输入内容时，你会发现未使用setTimeout函数的只会获取到输入前的内容，而使用setTimeout函数的则会获取到输入的内容。

这是为什么呢？

因为当按下按键的时候，JavaScript 引擎需要执行 keydown 的事件处理程序，然后更新文本框的 value 值，这两个任务也需要按顺序来，事件处理程序执行时，更新 value值（是在keypress后）的任务则进入队列等待，所以我们在 keydown 的事件处理程序里是无法得到更新后的value的，而利用 setTimeout(fn, 0)，我们把取 value 的操作放入队列，放在更新 value 值以后，这样便可获取出文本框的值。

未使用setTimeout函数，执行顺序是：`onkeydown => onkeypress => onkeyup

使用setTimeout函数，执行顺序是：

onkeydown => onkeypress => function => onkeyup`

虽然我们可以使用

keyup

来替代

keydown

，不过有一些问题，那就是长按时，

keyup

并不会触发。

长按时，keydown、keypress、keyup的调用顺序：

keydown
keypress
keydown
keypress
...
keyup

也就是说keyup只会触发一次，所以你无法用keyup来实时获取值。

我们还可以用

setImmediate()

来替代

setTimeout(fn,0)

：

if (!window.setImmediate) {  
    window.setImmediate = function(func, args){  
      return window.setTimeout(func, 0, args);  
   };  
  window.clearImmediate = window.clearTimeout;
 }

setImmediate()`方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数，必选的第一个参数func，表示将要执行的回调函数，它并不需要时间参数。

注意：目前只有IE10支持此方法，当然，在Nodejs中也可以调用此方法。

3、setTimeout的一些秘密

3.1 setTimeout中回调函数的this

由于setTimeout() 方法是浏览器 window 对象提供的，因此第一个参数函数中的this其实是指向window对象，这跟变量的作用域有关。

看个例子：

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

不过我们可以通过使用bind()方法来改变setTimeout回调函数里的this

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

3.2 setTimeout不止两个参数

我们都知道，setTimeout的第一个参数是要执行的回调函数，第二个参数是延迟时间（如果省略，会由浏览器自动设置。在IE，FireFox中，第一次配可能给个很大的数字，100ms上下，往后会缩小到最小时间间隔，Safari，chrome，opera则多为10ms上下。）

其实，setTimeout可以传入第三个参数、第四个参数….，它们表示神马呢？其实是用来表示第一个参数（回调函数）传入的参数。

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

 以上就是JavaScript 开发者应该知道的 setTimeout 秘密 的内容，更多相关内容请关注PHP中文网（www.php.cn）！