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

一、setTimeout()

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

var timerId = setTimeout(func|code, delay)

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

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

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

需要注意的是，推遲執(zhí)行的代碼必須以字符串的形式，放入setTimeout，因?yàn)橐鎯?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);

除了前兩個(gè)參數(shù)，setTimeout還允許添加更多的參數(shù)。它們將被傳入推遲執(zhí)行的函數(shù)。

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

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

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

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

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

上面代碼輸出的是1，而不是2，這表示回調(diào)函數(shù)的運(yùn)行環(huán)境已經(jīng)變成了全局環(huán)境。

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

function User(login) {
  this.login = login;
  this.sayHi = function() {
    console.log(this.login);
  }
}
  
var user = new User('John');
  
setTimeout(user.sayHi, 1000);

上面代碼只會(huì)顯示undefined，因?yàn)榈鹊絬ser.sayHi執(zhí)行時(shí)，它是在全局對(duì)象中執(zhí)行，所以this.login取不到值。

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

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

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

二、setInterval()

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

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

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

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

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)頁(yè)不在瀏覽器的當(dāng)前窗口（或tab），許多瀏覽器限制setInteral指定的反復(fù)運(yùn)行的任務(wù)最多每秒執(zhí)行一次。

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

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

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

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

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

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

根據(jù)這種思路，可以自己部署一個(gè)函數(shù)，實(shí)現(xiàn)間隔時(shí)間確定的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);

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

三、clearTimeout()，clearInterval()

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

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

四、運(yùn)行機(jī)制

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

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

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

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

看下面示例：

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

結(jié)果：1 秒之后，同時(shí)輸出 5 個(gè) 5。

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

五、經(jīng)典案例

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

結(jié)果：5 5 5 5 5

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

因?yàn)?setTimeout 的 console.log(i); 的i是 var 定義的，所以是函數(shù)級(jí)的作用域，不屬于 for 循環(huán)體，屬于 global。等到 for 循環(huán)結(jié)束，i 已經(jīng)等于 5 了，這個(gè)時(shí)候再執(zhí)行 setTimeout 的五個(gè)回調(diào)函數(shù)（參考上面對(duì)事件機(jī)制的闡述），里面的 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，因?yàn)檫@樣被引用，所以 for 循環(huán)結(jié)束后，這些作用域在 setTimeout 未執(zhí)行前都不會(huì)被釋放。

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

最新評(píng)論