setTimeout()用於在指定的毫秒數後呼叫函式或計算表示式

setInterval()在播放動畫的時，每隔一定時間就呼叫函式，方法或物件

目錄

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

setTimeout()

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

var timerId = setTimeout(func|code, delay)

上面程式碼中，setTimeout函式接受兩個引數，第一個引數func|code

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

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

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

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

setTimeout(f,1000);

// 或者

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

除了前兩個引數，setTimeout還允許新增更多的引數。它們將被傳入推遲執行的函式。

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

上面程式碼中，setTimeout共有4個引數。最後那兩個引數，將在1000毫秒之後回撥函式執行時，作為回撥函式的引數。

IE 9.0以下版本，只允許setTimeout有兩個引數，不支援更多的引數。

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

var x = 1;

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

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

上面程式碼輸出的是1，而不是2，這表示回撥函式的執行環境已經變成了全域性環境。

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

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執行時，它是在全域性物件中執行，所以this.login取不到值。

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

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

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

另一種更通用的解決方法，則是採用閉包，將this與當前執行環境繫結。

document.getElementById('click-ok').onclick = function() {
  var self = this;
  setTimeout(function() { 
    self.value='OK';
  }, 100);
}

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

setInterval()

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

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

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

上面程式碼表示每隔1000毫秒就輸出一個2，直到使用者點選了停止按鈕。

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

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
// ...

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

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

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

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

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

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

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

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

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

  setTimeout(interv, wait);
}

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

上面程式碼部署了一個interval函式，用迴圈呼叫setTimeout模擬了setInterval。

clearTimeout()，clearInterval()

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

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

clearTimeout(id1);
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方法。

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

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

執行機制

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

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

setTimeout(someTask,100);
veryLongTask();

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

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

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

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

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

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

為了進一步理解JavaScript的單執行緒模型，請看下面這段虛擬碼。

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

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

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

請問呼叫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)的作用是，儘可能早地執行指定的任務。

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

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

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

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

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

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

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

// 當前任務開始
// a() 開始執行
// b() 開始執行
// 傳入的值為42
// b() 結束執行
// a() 結束執行
// 當前任務結束
// Timeout

上面程式碼說明，setTimeout(f,0)必須要等到當前指令碼的所有同步任務結束後才會執行。

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

應用

setTimeout(f,0)有幾個非常重要的用途。它的一大應用是，可以調整事件的發生順序。比如，網頁開發中，某個事件先發生在子元素，然後冒泡到父元素，即子元素的事件回撥函式，會早於父元素的事件回撥函式觸發。如果，我們先讓父元素的事件回撥函式先發生，就要用到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'
};

上面程式碼在點選按鈕後，先觸發回撥函式A，然後觸發函式C。在函式A中，setTimeout將函式B推遲到下