JavaScript里，我們已經(jīng)會(huì)使用一些原生提供的方法來(lái)實(shí)現(xiàn)需要延時(shí)執(zhí)行的操作代碼，比如很多在線(xiàn)時(shí)鐘的制作，圖片輪播的實(shí)現(xiàn)，還有一些廣告彈窗，但凡可以自動(dòng)執(zhí)行的東西，都是可以和定時(shí)器有關(guān)的。今天就來(lái)和大家分享一下，關(guān)于我們?cè)贘avaScript里經(jīng)常會(huì)使用到的定時(shí)器方法

在JavaScript里，我們要學(xué)習(xí)四個(gè)定時(shí)器的使用方法，setTiemout、setInterval、setImmediate、requestAnimationFrame，一起來(lái)看看吧！

什么是定時(shí)器

JavaScript中提供了一些原生的函數(shù)方法來(lái)實(shí)現(xiàn)延時(shí)去執(zhí)行某一段代碼，這個(gè)就是定時(shí)器

下面我們來(lái)認(rèn)識(shí)一下這些定時(shí)器

setTimeout:

設(shè)置一個(gè)定時(shí)器，在定時(shí)器到期后執(zhí)行一次函數(shù)或代碼段

 var timeoutId=window.setTimeout(func[, delay,param1,...]);

 var timeoutId=window.setTimeout(code[, delay]);

上面用到的關(guān)鍵詞名稱(chēng)的意義：

timeoutId: 定時(shí)器ID

func: 延遲后執(zhí)行的函數(shù)

code: 延遲后執(zhí)行的代碼字符串，不推薦使用原理類(lèi)似eval()

delay: 延遲的時(shí)間（單位：毫秒），默認(rèn)值為0

param1: 向延遲函數(shù)傳遞而外的參數(shù)，IE9以上支持

setInterval:

以固定的時(shí)間間隔重復(fù)調(diào)用一個(gè)函數(shù)或者代碼段

 var intervalId=window.setInterval(func, delay[, param1,...]);

 var intervalId=window.setInterval(code, delay);

intervalId: 重復(fù)操作的ID

func: 延遲調(diào)用的函數(shù)

code: 代碼段

delay: 延遲時(shí)間，沒(méi)有默認(rèn)值

setImmediate:

在瀏覽器完全結(jié)束當(dāng)前運(yùn)行的操作之后立即執(zhí)行指定的函數(shù)(僅IE10和Node 0.10+中有實(shí)現(xiàn))，類(lèi)似setTimeout(func, 0)

 var immediateId=setImmediate(func[, param1, param2, ...]);

 var immediateId=setImmediate(func);

immediateId: 定時(shí)器ID

func: 回調(diào)

requestAnimationFrame:

專(zhuān)門(mén)為實(shí)現(xiàn)高性能的幀動(dòng)畫(huà)而設(shè)計(jì)的API，但是不能指定延遲時(shí)間，而是根據(jù)瀏覽器的刷新頻率而定（幀）

 var requestId=window.requestAnimationFrame(func);

func: 回調(diào)

舉幾個(gè)栗子加深思考

基本用法

 // 下面代碼執(zhí)行之后會(huì)輸出什么？
 var intervalId, timeoutId;
 timeoutId=setTimeout(function() {
    console.log(1);
 }, 300);
 setTimeout(function() {
 clearTimeout(timeoutId);
     console.log(2);
 }, 100);
 setTimeout('console.log("5")', 400);
 intervalId=setInterval(function() {
     console.log(4);
 clearInterval(intervalId);
 }, 200);
 // 分別輸出: 2、4、5

setInterval 和 setTimeout的區(qū)別？

// 執(zhí)行下面的代碼塊會(huì)輸出什么？
 setTimeout(function() {
    console.log('timeout');
 }, 1000);
 setInterval(function() {
    console.log('interval')
 }, 1000);
 // 輸出一次 timeout，每隔1S輸出一次 interval
 /*--------------------------------*/
 // 通過(guò)setTimeout模擬setInterval 和 setInterval有啥區(qū)別么？
 varcallback=function() {
 if(times++ > max) {
 clearTimeout(timeoutId);
 clearInterval(intervalId);
 }
     console.log('start', Date.now() - start);
 for(var i=0; i < 990000000; i++) {}
    console.log('end', Date.now() - start);
 },
 delay=100,
 times=0,
 max=5,
 start=Date.now(),
 intervalId, timeoutId;
 functionimitateInterval(fn, delay) {
    timeoutId=setTimeout(function() {
 fn();
 if(times <=max) {
 imitateInterval(fn ,delay);
 }
 }, delay);
 }
 imitateInterval(callback, delay);
 intervalId=setInterval(callback, delay);

如果是setTimeout和setInterval的話(huà)，它倆僅僅在執(zhí)行次數(shù)上有區(qū)別，setTimeout一次、setIntervaln次。

而通過(guò)setTimeout模擬的setInterval與setInterval的區(qū)別則在于：setTimeout只有在回調(diào)完成之后才會(huì)去調(diào)用下一次定時(shí)器，而setInterval則不管回調(diào)函數(shù)的執(zhí)行情況，當(dāng)?shù)竭_(dá)規(guī)定時(shí)間就會(huì)在事件隊(duì)列中插入一個(gè)執(zhí)行回調(diào)的事件，所以在選擇定時(shí)器的方式時(shí)需要考慮setInterval的這種特性是否會(huì)對(duì)你的業(yè)務(wù)代碼有什么影響？

setTimeout(func, 0) 和 setImmediate(func)誰(shuí)更快？

 console.time('immediate');
 console.time('timeout');
 setImmediate(()=> {
     console.timeEnd('immediate');
 });
 setTimeout(()=> {
     console.timeEnd('timeout');
 }, 0);

在Node.JS v6.7.0中測(cè)試發(fā)現(xiàn)setTimeout更早執(zhí)行

幾道經(jīng)典的定時(shí)器面試題

下面代碼運(yùn)行后的結(jié)果是什么？

 // 題目一
 var t=true;
 
 setTimeout(function(){
    t=false;
 }, 1000);
 
 while(t){}
 
 alert('end');

 // 題目二
 for(var i=0; i < 5; i++) {
 setTimeout(function() {
        console.log(i);
 }, 0);
 }

 
 // 題目三
 var obj={
    msg: 'obj',
 shout: function() {
 alert(this.msg);
 },
 waitAndShout: function() {
 setTimeout(function() {
 this.shout();
 }, 0);
 }
 };
 obj.waitAndShout();

在講解上面面試題的答案之前，我們先要理解一下定時(shí)器的工作原理，以方便理解上面的題目

JS定時(shí)器的工作原理

這里將用引用How JavaScript Timers Work中的例子來(lái)解釋定時(shí)器的工作原理，該圖為一個(gè)簡(jiǎn)單版的原理圖。

在這圖中，左側(cè)數(shù)字代表時(shí)間，單位毫秒；

左側(cè)文字代表某一個(gè)操作完成后，瀏覽器去詢(xún)問(wèn)當(dāng)前隊(duì)列中存在哪些正在等待執(zhí)行的操作；

藍(lán)色方塊表示正在執(zhí)行的代碼塊；

右側(cè)文字代表在代碼運(yùn)行過(guò)程中，出現(xiàn)哪些異步事件。

大致流程如下：

1.程序開(kāi)始時(shí)，有一個(gè)JS代碼塊開(kāi)始執(zhí)行，執(zhí)行時(shí)長(zhǎng)約為18ms，在執(zhí)行過(guò)程中有3個(gè)異步事件觸發(fā)，其中包括一個(gè)setTimeout、鼠標(biāo)點(diǎn)擊事件、setInterval

2.第一個(gè)setTimeout先運(yùn)行，延遲時(shí)間為10ms，稍后鼠標(biāo)事件出現(xiàn)，瀏覽器在事件隊(duì)列中插入點(diǎn)擊的回調(diào)函數(shù)，稍后setInterval運(yùn)行，10ms到達(dá)之后，setTimeout向事件隊(duì)列中插入setTimeout的回調(diào)

當(dāng)?shù)谝粋€(gè)代碼塊執(zhí)行完成后，瀏覽器查看隊(duì)列中有哪些事件在等待，他取出排在隊(duì)列最前面的代碼來(lái)執(zhí)行

3.在瀏覽器處理鼠標(biāo)點(diǎn)擊回調(diào)時(shí)，setInterval再次檢查到到達(dá)延遲時(shí)間，他將再次向事件隊(duì)列中插入一個(gè)interval的回調(diào)，以后每隔指定的延遲時(shí)間之后都會(huì)向隊(duì)列中插入一個(gè)回調(diào)

4.后面瀏覽器將在執(zhí)行完當(dāng)前隊(duì)頭的代碼之后，將再次取出目前隊(duì)頭的事件來(lái)執(zhí)行

在這也只是對(duì)定時(shí)器的工作原理做了簡(jiǎn)單的敘述，其實(shí)實(shí)際的實(shí)現(xiàn)處理過(guò)程會(huì)更加復(fù)雜。

面試題的答案

在我們理解了定時(shí)器的運(yùn)行原理之后，接下來(lái)我們就基于運(yùn)行原理的基礎(chǔ)上，來(lái)看看上面的經(jīng)典面試題的答案

第一題

alert永遠(yuǎn)都不會(huì)執(zhí)行，因?yàn)镴S是單線(xiàn)程的，且定時(shí)器的回調(diào)將在等待當(dāng)前正在執(zhí)行的任務(wù)完成后才執(zhí)行，而while(t) {}直接就進(jìn)入了死循環(huán)一直占用線(xiàn)程，不給回調(diào)函數(shù)執(zhí)行機(jī)會(huì)

第二題

代碼會(huì)輸出 5 5 5 5 5，理由同上，當(dāng)i=0時(shí)，生成一個(gè)定時(shí)器，將回調(diào)插入到事件隊(duì)列中，等待當(dāng)前隊(duì)列中無(wú)任務(wù)執(zhí)行時(shí)立即執(zhí)行，而此時(shí)for循環(huán)正在執(zhí)行，所以回調(diào)被擱置。當(dāng)for循環(huán)執(zhí)行完成后，隊(duì)列中存在著5個(gè)回調(diào)函數(shù)，他們的都將執(zhí)行console.log(i)的操作，因?yàn)楫?dāng)前JS代碼上中并沒(méi)有使用塊級(jí)作用域，所以i的值在for循環(huán)結(jié)束后一直為5，所以代碼將輸出5個(gè)5

第三題

這個(gè)問(wèn)題涉及到this的指向問(wèn)題，由setTimeout()調(diào)用的代碼運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上. 這會(huì)導(dǎo)致這些代碼中包含的this關(guān)鍵字會(huì)指向window (或全局)對(duì)象，window對(duì)象中并不存在shout方法，所以就會(huì)報(bào)錯(cuò)，修改方案如下:

 var obj={
     msg: 'obj',
 shout: function() {
 alert(this.msg);
 },
 waitAndShout: function() {
 var self=this; // 這里將this賦給一個(gè)變量
 setTimeout(function() {
            self.shout();
 }, 0);
 }
 };
 obj.waitAndShout();

需要注意的點(diǎn)

1.setTimeout有最小時(shí)間間隔限制，HTML5標(biāo)準(zhǔn)為4ms，小于4ms按照4ms處理，但是每個(gè)瀏覽器實(shí)現(xiàn)的最小間隔都不同

2.因?yàn)镴S引擎只有一個(gè)線(xiàn)程，所以它將會(huì)強(qiáng)制異步事件排隊(duì)執(zhí)行

3.如果setInterval的回調(diào)執(zhí)行時(shí)間長(zhǎng)于指定的延遲，setInterval將無(wú)間隔的一個(gè)接一個(gè)執(zhí)行

4.this的指向問(wèn)題可以通過(guò)bind函數(shù)、定義變量、箭頭函數(shù)的方式來(lái)解決