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);

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

需要注意的是，推遲執(zhí)行的代碼必須以字符串的形式，放入setTimeout，因為引擎內部使用eval函數(shù)，將字符串轉為代碼。如果推遲執(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ù)。

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

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

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

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

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

上面代碼輸出的是1，而不是2，這表示回調函數(shù)的運行環(huán)境已經(jīng)變成了全局環(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);

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

二、setInterval()

setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個任務每隔一段時間就執(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ù)，它們會傳入回調函數(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指定的反復運行的任務最多每秒執(zhí)行一次。

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

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

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

為了確保兩次執(zhí)行之間有固定的間隔，可以不用setInterval，而是每次執(zhí)行結束后，使用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(w){
    return function(){
      setTimeout(interv, w);
      func.call(null);
    }
  }(wait);
  
  setTimeout(interv, wait);
}
  
interval(function(){
  console.log(2);
},1000);

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

三、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);

四、運行機制

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

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

在日常編碼中，你會發(fā)現(xiàn)，給 setTimeout 和 setInterval 設定延遲時間往往并不準，或者干脆 setTimeout(function(){xxx},0) 也不是立馬執(zhí)行（特別是有耗時代碼在前），這是因為 js 是單線程的，有一個事件隊列機制，setTimeout 和 setInterval 的回調會到了延遲時間塞入事件隊列中，排隊執(zhí)行。

setTimeout ：延時 delay 毫秒之后，啥也不管，直接將回調函數(shù)加入事件隊列。
setInterval ：延時 delay 毫秒之后，先看看事件隊列中是否存在還沒有執(zhí)行的回調函數(shù)（ setInterval 的回調函數(shù)），如果存在，就不要再往事件隊列里加入回調函數(shù)了。

看下面示例：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

結果：1 秒之后，同時輸出 5 個 5。

因為 for 循環(huán)會先執(zhí)行完（同步優(yōu)先于異步優(yōu)先于回調），這時五個 setTimeout 的回調全部塞入了事件隊列中，然后 1 秒后一起執(zhí)行了。

五、經(jīng)典案例

for (var i = 0; i < 5; i++) {
    setTimeout(function (){
        console.log(i); 
     },1000); 
}

結果：5 5 5 5 5

為什么不是 1 2 3 4 5，問題出在作用域上。

因為 setTimeout 的 console.log(i); 的i是 var 定義的，所以是函數(shù)級的作用域，不屬于 for 循環(huán)體，屬于 global。等到 for 循環(huán)結束，i 已經(jīng)等于 5 了，這個時候再執(zhí)行 setTimeout 的五個回調函數(shù)（參考上面對事件機制的闡述），里面的 console.log(i); 的 i 去向上找作用域，只能找到 global下 的 i，即 5。所以輸出都是 5。

解決辦法：人為給 console.log(i); 創(chuàng)造作用域，保存i的值。

解決辦法一

for (var i = 0; i < 5; i++) {
    (function(i){      //立刻執(zhí)行函數(shù)
        setTimeout(function (){
            console.log(i); 
         },1000); 
    })(i); 
}

這里用到立刻執(zhí)行函數(shù)。這樣 console.log(i); 中的i就保存在每一次循環(huán)生成的立刻執(zhí)行函數(shù)中的作用域里了。

解決辦法二

for (let i = 0; i < 5; i++) {     //let 代替 var
    setTimeout(function (){
        console.log(i); 
     },1000); 
}

let 為代碼塊的作用域，所以每一次 for 循環(huán)，console.log(i); 都引用到 for 代碼塊作用域下的i，因為這樣被引用，所以 for 循環(huán)結束后，這些作用域在 setTimeout 未執(zhí)行前都不會被釋放。

以上所述是小編給大家介紹的JavaScript中定時器setTimeout()和setInterval()的用法，希望對大家有所幫助。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論