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

setTimeout()

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

var timerId = setTimeout(func|code, delay)

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

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

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

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

function f(){
  console.log(2);
}

setTimeout(f,1000);

// 或者

setTimeout(function (){console.log(2)},1000);

除了前兩個參數(shù)，setTimeout還允許添加更多的參數(shù)。它們將被傳入推遲執(zhí)行的函數(shù)（回調(diào)函數(shù)）。

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

上面代碼中，setTimeout共有4個參數(shù)。最后那兩個參數(shù)，將在1000毫秒之后回調(diào)函數(shù)執(zhí)行時，作為回調(diào)函數(shù)的參數(shù)。

IE 9.0及以下版本，只允許setTimeout有兩個參數(shù)，不支持更多的參數(shù)。這時有三種解決方法。第一種是在一個匿名函數(shù)里面，讓回調(diào)函數(shù)帶參數(shù)運行，再把匿名函數(shù)輸入setTimeout。

setTimeout(function() {
  myFunc("one", "two", "three");
}, 1000);

上面代碼中，myFunc是真正要推遲執(zhí)行的函數(shù)，有三個參數(shù)。如果直接放入setTimeout，低版本的IE不能帶參數(shù)，所以可以放在一個匿名函數(shù)。

第二種解決方法是使用bind方法，把多余的參數(shù)綁定在回調(diào)函數(shù)上面，生成一個新的函數(shù)輸入setTimeout。

setTimeout(function(arg1){}.bind(undefined, 10), 1000);

上面代碼中，bind方法第一個參數(shù)是undefined，表示將原函數(shù)的this綁定全局作用域，第二個參數(shù)是要傳入原函數(shù)的參數(shù)。它運行后會返回一個新函數(shù)，該函數(shù)不帶參數(shù)。

第三種解決方法是自定義setTimeout，使用apply方法將參數(shù)輸入回調(diào)函數(shù)。

<!--[if lte IE 9]><script>
(function(f){
window.setTimeout =f(window.setTimeout);
window.setInterval =f(window.setInterval);
})(function(f){return function(c,t){
var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
});
</script><![endif]-->

除了參數(shù)問題，setTimeout還有一個需要注意的地方：如果被setTimeout推遲執(zhí)行的回調(diào)函數(shù)是某個對象的方法，那么該方法中的this關(guān)鍵字將指向全局環(huán)境，而不是定義時所在的那個對象。

var x = 1;

var o = {
  x: 2,
  y: function(){
    console.log(this.x);
  }
};

setTimeout(o.y,1000);
// 1

上面代碼輸出的是1，而不是2，這表示o.y的this所指向的已經(jīng)不是o，而是全局環(huán)境了。

再看一個不容易發(fā)現(xiàn)錯誤的例子。

function User(login) {
  this.login = login;
  this.sayHi = function() {
    console.log(this.login);
  }
}

var user = new User('John');

setTimeout(user.sayHi, 1000);

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

為了防止出現(xiàn)這個問題，一種解決方法是將user.sayHi放在函數(shù)中執(zhí)行。

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

上面代碼中，sayHi是在user作用域內(nèi)執(zhí)行，而不是在全局作用域內(nèi)執(zhí)行，所以能夠顯示正確的值。

另一種解決方法是，使用bind方法，將綁定sayHi綁定在user上面。

setTimeout(user.sayHi.bind(user), 1000);

HTML 5標準規(guī)定，setTimeout的最短時間間隔是4毫秒。為了節(jié)電，對于那些不處于當前窗口的頁面，瀏覽器會將時間間隔擴大到1000毫秒。另外，如果筆記本電腦處于電池供電狀態(tài)，Chrome和IE 9以上的版本，會將時間間隔切換到系統(tǒng)定時器，大約是15.6毫秒。

setInterval()

setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個任務(wù)每隔一段時間就執(zhí)行一次，也就是無限次的定時執(zhí)行。

<input type="button" onclick="clearInterval(timer)" value="stop">

<script>
  var i = 1
  var timer = setInterval(function() {
    console.log(2);
  }, 1000);
</script>

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

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

function f(){
  for (var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
}

setInterval(f, 1000, "Hello World");
// Hello World
// Hello World
// Hello World
// ...

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

setInterval指定的是“開始執(zhí)行”之間的間隔，并不考慮每次任務(wù)執(zhí)行本身所消耗的事件。因此實際上，兩次執(zhí)行之間的間隔會小于指定的時間。比如，setInterval指定每100ms執(zhí)行一次，每次執(zhí)行需要5ms，那么第一次執(zhí)行結(jié)束后95毫秒，第二次執(zhí)行就會開始。如果某次執(zhí)行耗時特別長，比如需要105毫秒，那么它結(jié)束后，下一次執(zhí)行就會立即開始。

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

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

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

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

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

根據(jù)這種思路，可以自己部署一個函數(shù)，實現(xiàn)間隔時間確定的setInterval的效果。

function interval(func, wait){
  var interv = function(){
    func.call(null);
    setTimeout(interv, wait);
  };

  setTimeout(interv, wait);
}

interval(function(){
  console.log(2);
},1000);

上面代碼部署了一個interval函數(shù)，用循環(huán)調(diào)用setTimeout模擬了setInterval。

HTML 5標準規(guī)定，setInterval的最短間隔時間是10毫秒，也就是說，小于10毫秒的時間間隔會被調(diào)整到10毫秒。

clearTimeout()，clearInterval()

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

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整數(shù)值是連續(xù)的，也就是說，第二個setTimeout方法返回的整數(shù)值，將比第一個的整數(shù)值大1。利用這一點，可以寫一個函數(shù)，取消當前所有的setTimeout。

(function() {
  var gid = setInterval(clearAllTimeouts, 0);

  function clearAllTimeouts() {
    var id = setTimeout(function() {}, 0);
    while (id > 0) {
      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();

運行上面代碼后，實際上再設(shè)置任何setTimeout都無效了。

下面是一個clearTimeout實際應(yīng)用的例子。有些網(wǎng)站會實時將用戶在文本框的輸入，通過Ajax方法傳回服務(wù)器，jQuery的寫法如下。

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

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

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

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

利用setTimeout和clearTimeout，可以實現(xiàn)debounce方法。

function debounce(fn, delay){
    var timer = null; // 聲明計時器
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    };
}

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

運行機制

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

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

setTimeout(someTask,100);
veryLongTask();

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

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

setInterval(function(){
  console.log(2);
},1000);

(function (){ 
  sleeping(3000);
})();

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

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

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

function init(){
  { 耗時5ms的某個操作 } 
  觸發(fā)mouseClickEvent事件
  { 耗時5ms的某個操作 }
  setInterval(timerTask,10);
  { 耗時5ms的某個操作 }
}

function handleMouseClick(){
   耗時8ms的某個操作 
}

function timerTask(){
   耗時2ms的某個操作 
}

請問調(diào)用init函數(shù)后，這段代碼的運行順序是怎樣的？

• 0-15ms：運行init函數(shù)。

• 15-23ms：運行handleMouseClick函數(shù)。請注意，這個函數(shù)是在5ms時觸發(fā)的，應(yīng)該在那個時候就立即運行，但是由于單線程的關(guān)系，必須等到init函數(shù)完成之后再運行。

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

• 30-32ms：運行timerTask函數(shù)。

• 40-42ms：運行timerTask函數(shù)。

setTimeout(f,0)

含義

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

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

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

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

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

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

setTimeout(function() {
  console.log("Timeout");
}, 0);

function a(x) { 
    console.log("a() 開始運行");
    b(x);
    console.log("a() 結(jié)束運行");
}

function b(y) { 
    console.log("b() 開始運行");
    console.log("傳入的值為" + y);
    console.log("b() 結(jié)束運行");
}

console.log("當前任務(wù)開始");
a(42);
console.log("當前任務(wù)結(jié)束");

// 當前任務(wù)開始
// a() 開始運行
// b() 開始運行
// 傳入的值為42
// b() 結(jié)束運行
// a() 結(jié)束運行
// 當前任務(wù)結(jié)束
// Timeout

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

0毫秒實際上達不到的。根據(jù)HTML 5標準，setTimeOut推遲執(zhí)行的時間，最少是4毫秒。如果小于這個值，會被自動增加到4。這是為了防止多個setTimeout(f,0)語句連續(xù)執(zhí)行，造成性能問題。

另一方面，瀏覽器內(nèi)部使用32位帶符號的整數(shù)，來儲存推遲執(zhí)行的時間。這意味著setTimeout最多只能推遲執(zhí)行2147483647毫秒（24.8天），超過這個時間會發(fā)生溢出，導(dǎo)致回調(diào)函數(shù)將在當前任務(wù)隊列結(jié)束后立即執(zhí)行，即等同于setTimeout(f,0)的效果。

應(yīng)用

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

var input = document.getElementsByTagName('input[type=button]')[0];

input.onclick = function A() {
  setTimeout(function B() {
    input.value +=' input'; 
  }, 0)
};

document.body.onclick = function C() {
  input.value += ' body'
};

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

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

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

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

document.getElementById('my-ok').onkeypress = function() {
  var self = this;
  setTimeout(function() {
    self.value = self.value.toUpperCase();
  }, 0);
}

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

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

var div = document.getElementsByTagName('div')[0];

// 寫法一
for(var i=0xA00000;i<0xFFFFFF;i++) {
  div.style.backgroundColor = '#'+i.toString(16);
}

// 寫法二
var timer;
var i=0x100000;

function func() {
  timer = setTimeout(func, 0);
  div.style.backgroundColor = '#'+i.toString(16);
  if (i++ == 0xFFFFFF) clearInterval(timer);
}

timer = setTimeout(func, 0);

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

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

參考鏈接

• Ilya Kantor, Understanding timers: setTimeout and setInterval
• Ilya Kantor, Events and timing in-depth
• MDN, WindowTimers.setTimeout()
• Artem Tyurin, Being evil with setTimeout