JavaScript 定時器

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

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);
// 1
// 3
// 2

上面代碼會先輸出1和3，然后等待1000毫秒再輸出2。注意，console.log(2)必須以字符串的形式，作為setTimeout的參數(shù)。

如果推遲執(zhí)行的是函數(shù)，就直接將函數(shù)名，作為setTimeout的參數(shù)。

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

setTimeout(f, 1000);

setTimeout的第二個參數(shù)如果省略，則默認為0。

setTimeout(f)
// 等同于
setTimeout(f, 0)

除了前兩個參數(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ù)。

還有一個需要注意的地方，如果回調(diào)函數(shù)是對象的方法，那么setTimeout使得方法內(nèi)部的this關(guān)鍵字指向全局環(huán)境，而不是定義時所在的那個對象。

var x = 1;

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

setTimeout(obj.y, 1000) // 1

上面代碼輸出的是1，而不是2。因為當obj.y在1000毫秒后運行時，this所指向的已經(jīng)不是obj了，而是全局環(huán)境。

為了防止出現(xiàn)這個問題，一種解決方法是將obj.y放入一個函數(shù)。

var x = 1;

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

setTimeout(function () {
  obj.y();
}, 1000);
// 2

上面代碼中，obj.y放在一個匿名函數(shù)之中，這使得obj.y在obj的作用域執(zhí)行，而不是在全局作用域內(nèi)執(zhí)行，所以能夠顯示正確的值。

另一種解決方法是，使用bind方法，將obj.y這個方法綁定在obj上面。

var x = 1;

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

setTimeout(obj.y.bind(obj), 1000)
// 2

setInterval()

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

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

上面代碼中，每隔1000毫秒就輸出一個2，會無限運行下去，直到關(guān)閉當前窗口。

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

下面是一個通過setInterval方法實現(xiàn)網(wǎng)頁動畫的例子。

var div = document.getElementById('someDiv');
var opacity = 1;
var fader = setInterval(function() {
  opacity -= 0.1;
  if (opacity >= 0) {
    div.style.opacity = opacity;
  } else {
    clearInterval(fader);
  }
}, 100);

上面代碼每隔100毫秒，設(shè)置一次div元素的透明度，直至其完全透明為止。

setInterval的一個常見用途是實現(xiàn)輪詢。下面是一個輪詢 URL 的 Hash 值是否發(fā)生變化的例子。

var hash = window.location.hash;
var hashWatcher = setInterval(function() {
  if (window.location.hash != hash) {
    updatePage();
  }
}, 1000);

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

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

var i = 1;
var timer = setTimeout(function f() {
  // ...
  timer = setTimeout(f, 2000);
}, 2000);

上面代碼可以確保，下一次執(zhí)行總是在本次執(zhí)行結(jié)束之后的2000毫秒開始。

clearTimeout()，clearInterval()

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

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

clearTimeout(id1);
clearInterval(id2);

上面代碼中，回調(diào)函數(shù)f不會再執(zhí)行了，因為兩個定時器都被取消了。

setTimeout和setInterval返回的整數(shù)值是連續(xù)的，也就是說，第二個setTimeout方法返回的整數(shù)值，將比第一個的整數(shù)值大1。

function f() {}
setTimeout(f, 1000) // 10
setTimeout(f, 1000) // 11
setTimeout(f, 1000) // 12

上面代碼中，連續(xù)調(diào)用三次setTimeout，返回值都比上一次大了1。

利用這一點，可以寫一個函數(shù)，取消當前所有的setTimeout定時器。

(function() {
  // 每輪事件循環(huán)檢查一次
  var gid = setInterval(clearAllTimeouts, 0);

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

上面代碼中，先調(diào)用setTimeout，得到一個計算器編號，然后把編號比它小的計數(shù)器全部取消。

實例：debounce 函數(shù)

有時，我們不希望回調(diào)函數(shù)被頻繁調(diào)用。比如，用戶填入網(wǎng)頁輸入框的內(nèi)容，希望通過 Ajax 方法傳回服務(wù)器，jQuery 的寫法如下。

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

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

這種做法叫做 debounce（防抖動）。假定兩次 Ajax 通信的間隔不得小于2500毫秒，上面的代碼可以改寫成下面這樣。

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

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

上面代碼中，只要在2500毫秒之內(nèi)，用戶再次擊鍵，就會取消上一次的定時器，然后再新建一個定時器。這樣就保證了回調(diào)函數(shù)之間的調(diào)用間隔，至少是2500毫秒。

運行機制

setTimeout和setInterval的運行機制，是將指定的代碼移出本輪事件循環(huán)，等到下一輪事件循環(huán)，再檢查是否到了指定時間。如果到了，就執(zhí)行對應的代碼；如果不到，就繼續(xù)等待。

這意味著，setTimeout和setInterval指定的回調(diào)函數(shù)，必須等到本輪事件循環(huán)的所有同步任務(wù)都執(zhí)行完，才會開始執(zhí)行。由于前面的任務(wù)到底需要多少時間執(zhí)行完，是不確定的，所以沒有辦法保證，setTimeout和setInterval指定的任務(wù)，一定會按照預定時間執(zhí)行。

setTimeout(someTask, 100);
veryLongTask();

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

再看一個setInterval的例子。

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

sleep(3000);

function sleep(ms) {
  var start = Date.now();
  while ((Date.now() - start) < ms) {
  }
}

上面代碼中，setInterval要求每隔1000毫秒，就輸出一個2。但是，緊接著的sleep語句需要3000毫秒才能完成，那么setInterval就必須推遲到3000毫秒之后才開始生效。注意，生效后setInterval不會產(chǎn)生累積效應，即不會一下子輸出三個2，而是只會輸出一個2。

setTimeout(f, 0)

含義

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

答案是不會。因為上一節(jié)說過，必須要等到當前腳本的同步任務(wù)，全部處理完以后，才會執(zhí)行setTimeout指定的回調(diào)函數(shù)f。也就是說，setTimeout(f, 0)會在下一輪事件循環(huán)一開始就執(zhí)行。

setTimeout(function () {
  console.log(1);
}, 0);
console.log(2);
// 2
// 1

上面代碼先輸出2，再輸出1。因為2是同步任務(wù)，在本輪事件循環(huán)執(zhí)行，而1是下一輪事件循環(huán)執(zhí)行。

總之，setTimeout(f, 0)這種寫法的目的是，盡可能早地執(zhí)行f，但是并不能保證立刻就執(zhí)行f。

實際上，setTimeout(f, 0)不會真的在0毫秒之后運行，不同的瀏覽器有不同的實現(xiàn)。以 Edge 瀏覽器為例，會等到4毫秒之后運行。如果電腦正在使用電池供電，會等到16毫秒之后運行；如果網(wǎng)頁不在當前 Tab 頁，會推遲到1000毫秒（1秒）之后運行。這樣是為了節(jié)省系統(tǒng)資源。

應用

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

// HTML 代碼如下
// <input type="button" id="myButton" value="click">

var input = document.getElementById('myButton');

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推遲到下一輪事件循環(huán)執(zhí)行，這樣就起到了，先觸發(fā)父元素的回調(diào)函數(shù)C的目的了。

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

// HTML 代碼如下
// <input type="text" id="input-box">

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

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

document.getElementById('input-box').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) clearTimeout(timer);
}

timer = setTimeout(func, 0);

上面代碼有兩種寫法，都是改變一個網(wǎng)頁元素的背景色。寫法一會造成瀏覽器“堵塞”，因為 JavaScript 執(zhí)行速度遠高于 DOM，會造成大量 DOM 操作“堆積”，而寫法二就不會，這就是setTimeout(f, 0)的好處。

另一個使用這種技巧的例子是代碼高亮的處理。如果代碼塊很大，一次性處理，可能會對性能造成很大的壓力，那么將其分成一個個小塊，一次處理一塊，比如寫成setTimeout(highlightNext, 50)的樣子，性能壓力就會減輕。