有關定時器setTimeout()、setInterval()詳解

JavaScript提供定時執行代碼的功能，叫做定時器（timer），主要由setTimeout()和setInterval()這兩個函數來完成。

setTimeout()

setTimeout函數用來指定某個函數或某段代碼，在多少毫秒之后執行。它返回一個整數，表示定時器的編號，以后可以用來取消這個定時器。

var timerId = setTimeout(func|code, delay) 

上面代碼中，setTimeout函數接受兩個參數，第一個參數func|code是將要推遲執行的函數名或者一段代碼，第二個參數delay是推遲執行的毫秒數。

1.  
   console.log(1);
2.  
   setTimeout('console.log(2)',1000);
3.  
   console.log(3);

上面代碼的輸出結果就是1，3，2，因為setTimeout指定第二行語句推遲1000毫秒再執行。

需要注意的是，推遲執行的代碼必須以字符串的形式，放入setTimeout，因為引擎內部使用eval函數，將字符串轉為代碼。如果推遲執行的是函數，則可以直接將函數名，放入setTimeout。一方面eval函數有安全顧慮，另一方面為了便於JavaScript引擎優化代碼，setTimeout方法一般總是采用函數名的形式，就像下面這樣。

1.  
   function f(){
2.  
   console.log(2);
3.  
   }
4.  
    
5.  
   setTimeout(f,1000);
6.  
    
7.  
   // 或者
8.  
    
9.  
   setTimeout(function (){console.log(2)},1000);

除了前兩個參數，setTimeout還允許添加更多的參數。它們將被傳入推遲執行的函數。

1.  
   setTimeout(function(a,b){
2.  
   console.log(a+b);
3.  
   },1000,1,1);

上面代碼中，setTimeout共有4個參數。最后那兩個參數，將在1000毫秒之后回調函數執行時，作為回調函數的參數。

IE 9.0以下版本，只允許setTimeout有兩個參數，不支持更多的參數。這時有三種解決方法，第一種是自定義setTimeout，使用apply方法將參數輸入回調函數；第二種是在一個匿名函數里面，讓回調函數帶參數運行，再把匿名函數輸入setTimeout；第三種使用bind方法，把多余的參數綁定在回調函數上面，生成一個新的函數輸入setTimeout。

除了參數問題，setTimeout還有一個需要注意的地方：被setTimeout推遲執行的回調函數是在全局環境執行，這有可能不同於函數定義時的上下文環境。

1.  
   var x = 1;
2.  
    
3.  
   var o = {
4.  
   x: 2,
5.  
   y: function(){
6.  
   console.log(this.x);
7.  
   }
8.  
   };
9.  
    
10.  
    setTimeout(o.y,1000);
11.  
    // 1

上面代碼輸出的是1，而不是2，這表示回調函數的運行環境已經變成了全局環境。

再看一個不容易發現錯誤的例子。

1.  
   function User(login) {
2.  
   this.login = login;
3.  
   this.sayHi = function() {
4.  
   console.log(this.login);
5.  
   }
6.  
   }
7.  
    
8.  
   var user = new User('John');
9.  
    
10.  
    setTimeout(user.sayHi, 1000);

上面代碼只會顯示undefined，因為等到user.sayHi執行時，它是在全局對象中執行，所以this.login取不到值。

為了防止出現這個問題，一種解決方法是將user.sayHi放在函數中執行。

1.  
   setTimeout(function() {
2.  
   user.sayHi();
3.  
   }, 1000);

上面代碼中，user.sayHi是在函數作用域內執行，而不是在全局作用域內執行，所以能夠顯示正確的值。

另一種更通用的解決方法，則是采用閉包，將this與當前運行環境綁定。

1.  
   document.getElementById('click-ok').onclick = function() {
2.  
   var self = this;
3.  
   setTimeout(function() {
4.  
   self.value='OK';
5.  
   }, 100);
6.  
   }

上面代碼中，setTimeout指定的函數中的this，總是指向定義時所在的DOM節點。

setInterval()

setInterval函數的用法與setTimeout完全一致，區別僅僅在於setInterval指定某個任務每隔一段時間就執行一次，也就是無限次的定時執行。

1.  
   <input type="button" onclick="clearInterval(timer)" value="stop">
2.  
    
3.  
   <script>
4.  
   var i = 1
5.  
   var timer = setInterval(function() {
6.  
   console.log(2);
7.  
   }, 1000);
8.  
   </script>

上面代碼表示每隔1000毫秒就輸出一個2，直到用戶點擊了停止按鈕。

與setTimeout一樣，除了前兩個參數，setInterval 方法還可以接受更多的參數，它們會傳入回調函數，下面是一個例子。

1.  
   function f(){
2.  
   for (var i=0;i<arguments.length;i++){
3.  
   console.log(arguments[i]);
4.  
   }
5.  
   }
6.  
    
7.  
   setInterval(f, 1000, "Hello World");
8.  
   // Hello World
9.  
   // Hello World
10.  
    // Hello World
11.  
    // ...

如果網頁不在瀏覽器的當前窗口（或tab），許多瀏覽器限制setInteral指定的反復運行的任務最多每秒執行一次。

setInterval指定的是，“開始執行”之間的間隔，因此實際上，兩次執行之間的間隔會小於setInterval指定的時間。假定setInterval指定，每100毫秒執行一次，每次執行需要5毫秒，那么第一次執行結束后95毫秒，第二次執行就會開始。如果某次執行耗時特別長，比如需要105毫秒，那么它結束后，下一次執行就會立即開始。

1.  
   var i = 1;
2.  
   var timer = setInterval(function() {
3.  
   alert(i++);
4.  
   }, 2000);

上面代碼每隔2000毫秒，就跳出一個alert對話框。如果用戶一直不點擊“確定”，整個瀏覽器就處於“堵塞”狀態，后面的執行就一直無法觸發，將會累積起來。舉例來說，第一次跳出alert對話框后，用戶過了6000毫秒才點擊“確定”，那么第二次、第三次、第四次執行將累積起來，它們之間不會再有等待間隔。

為了確保兩次執行之間有固定的間隔，可以不用setInterval，而是每次執行結束后，使用setTimeout指定下一次執行的具體時間。上面代碼用setTimeout，可以改寫如下。

1.  
   var i = 1;
2.  
   var timer = setTimeout(function() {
3.  
   alert(i++);
4.  
   timer = setTimeout(arguments.callee, 2000);
5.  
   }, 2000);

上面代碼可以確保兩次執行的間隔是2000毫秒。

根據這種思路，可以自己部署一個函數，實現間隔時間確定的setInterval的效果。

1.  
   function interval(func, wait){
2.  
   var interv = function(w){
3.  
   return function(){
4.  
   setTimeout(interv, w);
5.  
   func.call(null);
6.  
   }
7.  
   }(wait);
8.  
    
9.  
   setTimeout(interv, wait);
10.  
    }
11.  
     
12.  
    interval(function(){
13.  
    console.log(2);
14.  
    },1000);

上面代碼部署了一個interval函數，用循環調用setTimeout模擬了setInterval。

clearTimeout()，clearInterval()

setTimeout和setInterval函數，都返回一個表示計數器編號的整數值，將該整數傳入clearTimeout和clearInterval函數，就可以取消對應的定時器。

1.  
   var id1 = setTimeout(f,1000);
2.  
   var id2 = setInterval(f,1000);
3.  
    
4.  
   clearTimeout(id1);
5.  
   clearInterval(id2);

下面是一個clearTimeout實際應用的例子。有些網站會實時將用戶在文本框的輸入，通過Ajax方法傳回服務器，用jQuery表示就是下面的寫法。

$('textarea').on('keydown', ajaxAction);

這樣寫有一個很大的缺點，就是如果用戶連續擊鍵，就會連續觸發keydown事件，造成大量的Ajax通信。這是不必要的，而且很可能會發生性能問題。正確的做法應該是，設置一個門檻值，表示兩次Ajax通信的最小間隔時間。如果在設定的時間內，發生新的keydown事件，則不觸發Ajax通信，並且重新開始計時。如果過了指定時間，沒有發生新的keydown事件，將進行Ajax通信將數據發送出去。

這種做法叫做debounce（防抖動）方法，用來返回一個新函數。只有當兩次觸發之間的時間間隔大於事先設定的值，這個新函數才會運行實際的任務。假定兩次Ajax通信的間隔不小於2500毫秒，上面的代碼可以改寫成下面這樣。

$('textarea').on('keydown', debounce(ajaxAction, 2500))

利用setTimeout和clearTimeout，可以實現debounce方法。

1.  
   function debounce(fn, delay){
2.  
   var timer = null; // 聲明計時器
3.  
   return function(){
4.  
   var context = this, args = arguments;
5.  
   clearTimeout(timer);
6.  
   timer = setTimeout(function(){
7.  
   fn.apply(context, args);
8.  
   }, delay);
9.  
   };
10.  
    }

現實中，最好不要設置太多的setTimeout和setInterval，它們耗費CPU。比較理想的做法是，將要推遲執行的代碼都放在一個函數里，然后只對這個函數使用setTimeout或setInterval。

運行機制

setTimeout和setInterval的運行機制是，將指定的代碼移出本次執行，等到下一輪Event Loop時，再檢查是否到了指定時間。如果到了，就執行對應的代碼；如果不到，就等到再下一輪Event Loop時重新判斷。這意味着，setTimeout指定的代碼，必須等到本次執行的所有代碼都執行完，才會執行。

每一輪Event Loop時，都會將“任務隊列”中需要執行的任務，一次執行完。setTimeout和setInterval都是把任務添加到“任務隊列”的尾部。因此，它們實際上要等到當前腳本的所有同步任務執行完，然后再等到本次Event Loop的“任務隊列”的所有任務執行完，才會開始執行。由於前面的任務到底需要多少時間執行完，是不確定的，所以沒有辦法保證，setTimeout和setInterval指定的任務，一定會按照預定時間執行。

1.  
   setTimeout(someTask,100);
2.  
   veryLongTask();

上面代碼的setTimeout，指定100毫秒以后運行一個任務。但是，如果后面立即運行的任務（當前腳本的同步任務））非常耗時，過了100毫秒還無法結束，那么被推遲運行的someTask就只有等着，等到前面的veryLongTask運行結束，才輪到它執行。

這一點對於setInterval影響尤其大。

1.  
   setInterval(function(){
2.  
   console.log(2);
3.  
   },1000);
4.  
    
5.  
   (function (){
6.  
   sleeping(3000);
7.  
   })();

上面的第一行語句要求每隔1000毫秒，就輸出一個2。但是，第二行語句需要3000毫秒才能完成，請問會發生什么結果？

結果就是等到第二行語句運行完成以后，立刻連續輸出三個2，然后開始每隔1000毫秒，輸出一個2。也就是說，setIntervel具有累積效應，如果某個操作特別耗時，超過了setInterval的時間間隔，排在后面的操作會被累積起來，然后在很短的時間內連續觸發，這可能或造成性能問題（比如集中發出Ajax請求）。

為了進一步理解JavaScript的單線程模型，請看下面這段偽代碼。

1.  
   function init(){
2.  
   { 耗時5ms的某個操作 }
3.  
   觸發mouseClickEvent事件
4.  
   { 耗時5ms的某個操作 }
5.  
   setInterval(timerTask,10);
6.  
   { 耗時5ms的某個操作 }
7.  
   }
8.  
    
9.  
   function handleMouseClick(){
10.  
    耗時8ms的某個操作
11.  
    }
12.  
     
13.  
    function timerTask(){
14.  
    耗時2ms的某個操作
15.  
    }

請問調用init函數后，這段代碼的運行順序是怎樣的？

• 0-15ms：運行init函數。

• 15-23ms：運行handleMouseClick函數。請注意，這個函數是在5ms時觸發的，應該在那個時候就立即運行，但是由於單線程的關系，必須等到init函數完成之后再運行。

• 23-25ms：運行timerTask函數。這個函數是在10ms時觸發的，規定每10ms運行一次，即在20ms、30ms、40ms等時候運行。由於20ms時，JavaScript線程還有任務在運行，因此必須延遲到前面任務完成時再運行。

• 30-32ms：運行timerTask函數。

• 40-42ms：運行timerTask函數。

setTimeout(f,0)

含義

setTimeout的作用是將代碼推遲到指定時間執行，如果指定時間為0，即setTimeout(f,0)，那么會立刻執行嗎？

答案是不會。因為上一段說過，必須要等到當前腳本的同步任務和“任務隊列”中已有的事件，全部處理完以后，才會執行setTimeout指定的任務。也就是說，setTimeout的真正作用是，在“任務隊列”的現有事件的后面再添加一個事件，規定在指定時間執行某段代碼。setTimeout添加的事件，會在下一次Event Loop執行。

setTimeout(f,0)將第二個參數設為0，作用是讓f在現有的任務（腳本的同步任務和“任務隊列”中已有的事件）一結束就立刻執行。也就是說，setTimeout(f,0)的作用是，盡可能早地執行指定的任務。

1.  
   setTimeout(function (){
2.  
   console.log("你好！");
3.  
   }, 0);

上面代碼的含義是，盡可能早地顯示“你好！”。

setTimeout(f,0)指定的任務，最早也要到下一次Event Loop才會執行。請看下面的例子。

1.  
   setTimeout(function() {
2.  
   console.log("Timeout");
3.  
   }, 0);
4.  
    
5.  
   function a(x) {
6.  
   console.log("a() 開始運行");
7.  
   b(x);
8.  
   console.log("a() 結束運行");
9.  
   }
10.  
     
11.  
    function b(y) {
12.  
    console.log("b() 開始運行");
13.  
    console.log("傳入的值為" + y);
14.  
    console.log("b() 結束運行");
15.  
    }
16.  
     
17.  
    console.log("當前任務開始");
18.  
    a(42);
19.  
    console.log("當前任務結束");
20.  
     
21.  
    // 當前任務開始
22.  
    // a() 開始運行
23.  
    // b() 開始運行
24.  
    // 傳入的值為42
25.  
    // b() 結束運行
26.  
    // a() 結束運行
27.  
    // 當前任務結束
28.  
    // Timeout

上面代碼說明，setTimeout(f,0)必須要等到當前腳本的所有同步任務結束后才會執行。

0毫秒實際上達不到的。根據HTML 5標准，setTimeOut推遲執行的時間，最少是4毫秒。如果小於這個值，會被自動增加到4。另一方面，瀏覽器內部使用32位帶符號的整數，來儲存推遲執行的時間。這意味着setTimeout最多只能推遲執行2147483647毫秒（24.8天），超過這個時間會發生溢出，導致回調函數將在當前任務隊列結束后立即執行，即等同於setTimeout(f,0)的效果

應用

setTimeout(f,0)有幾個非常重要的用途。它的一大應用是，可以調整事件的發生順序。比如，網頁開發中，某個事件先發生在子元素，然后冒泡到父元素，即子元素的事件回調函數，會早於父元素的事件回調函數觸發。如果，我們先讓父元素的事件回調函數先發生，就要用到setTimeout(f, 0)。

1.  
   var input = document.getElementsByTagName('input[type=button]')[0];
2.  
    
3.  
   input.onclick = function A() {
4.  
   setTimeout(function B() {
5.  
   input.value +=' input';
6.  
   }, 0)
7.  
   };
8.  
    
9.  
   document.body.onclick = function C() {
10.  
    input.value += ' body'
11.  
    };

上面代碼在點擊按鈕后，先觸發回調函數A，然后觸發函數C。在函數A中，setTimeout將函數B推遲到下一輪Loop執行，這樣就起到了，先觸發父元素的回調函數C的目的了。

用戶自定義的回調函數，通常在瀏覽器的默認動作之前觸發。比如，用戶在輸入框輸入文本，keypress事件會在瀏覽器接收文本之前觸發。因此，下面的回調函數是達不到目的的。

1.  
   document.getElementById('input-box').onkeypress = function(event) {
2.  
   this.value = this.value.toUpperCase();
3.  
   }

上面代碼想在用戶輸入文本后，立即將字符轉為大寫。但是實際上，它只能將上一個字符轉為大寫，因為瀏覽器此時還沒接收到文本，所以this.value取不到最新輸入的那個字符。只有用setTimeout改寫，上面的代碼才能發揮作用。

1.  
   document.getElementById('my-ok').onkeypress = function() {
2.  
   var self = this;
3.  
   setTimeout(function() {
4.  
   self.value = self.value.toUpperCase();
5.  
   }, 0);
6.  
   }

上面代碼將代碼放入setTimeout之中，就能使得它在瀏覽器接收到文本之后觸發。

由於setTimeout(f,0)實際上意味着，將任務放到瀏覽器最早可得的空閑時段執行，所以那些計算量大、耗時長的任務，常常會被放到幾個小部分，分別放到setTimeout(f,0)里面執行。

1.  
   var div = document.getElementsByTagName('div')[0];
2.  
    
3.  
   // 寫法一
4.  
   for(var i=0xA00000;i<0xFFFFFF;i++) {
5.  
   div.style.backgroundColor = '#'+i.toString(16);
6.  
   }
7.  
    
8.  
   // 寫法二
9.  
   var timer;
10.  
    var i=0x100000;
11.  
     
12.  
    function func() {
13.  
    timer = setTimeout(func, 0);
14.  
    div.style.backgroundColor = '#'+i.toString(16);
15.  
    if (i++ == 0xFFFFFF) clearInterval(timer);
16.  
    }
17.  
     
18.  
    timer = setTimeout(func, 0);

上面代碼有兩種寫法，都是改變一個網頁元素的背景色。寫法一會造成瀏覽器“堵塞”，而寫法二就能就不會，這就是setTimeout(f,0)的好處。

另一個使用這種技巧的例子是，代碼高亮的處理。如果代碼塊很大，就會分成一個個小塊，寫成諸如setTimeout(highlightNext, 50)的樣子，進行分塊處理。

 

 

參考鏈接

• Ilya Kantor, Understanding timers: setTimeout and setInterval
• Ilya Kantor, Events and timing in-depth

參考來自《JavaScript 標准參考教程（alpha）》，by 阮一峰