快捷導(dǎo)航

setTimeout函數(shù)的神奇使用

更新時(shí)間：2017年02月26日 15:50:00 作者：Javdroider

setTimeout函數(shù)是一個(gè)原生的javascript函數(shù)。setTimeout函數(shù)會(huì)在一個(gè)指定的延遲時(shí)間之后調(diào)用一個(gè)函數(shù)或執(zhí)行一段指定的代碼。它的應(yīng)用非常廣泛，例如我們希望用戶在瀏覽器某個(gè)頁(yè)面一段時(shí)間后彈出一個(gè)對(duì)話框，或者是鼠標(biāo)點(diǎn)擊某個(gè)元素后隔幾秒鐘在刪除這個(gè)元素。

【寫(xiě)在前面的胡言亂語(yǔ)】

　　自從大三開(kāi)始實(shí)習(xí)之后，就沒(méi)有寫(xiě)博客了，雖然學(xué)了很多東西，但是如果沒(méi)有進(jìn)行總結(jié)和分享，學(xué)的東西就很容易忘記，而且不進(jìn)行分享，就不會(huì)手動(dòng)去敲代碼，這樣對(duì)知識(shí)的理解就不夠透徹。

現(xiàn)在畢業(yè)半年多了，最近學(xué)習(xí)了《JavaScript高級(jí)程序設(shè)計(jì)》這本書(shū)，受益匪淺，看了才知道雖然自己寫(xiě)了那么多JS，但是對(duì)JS的理解最多就只是中下水平。

現(xiàn)在看第二遍，邊看邊敲代碼，邊分享，希望看到這篇文章的你，能有所收獲。

【這是正文】

　　《JavaScript高級(jí)程序設(shè)計(jì)》這本書(shū)里面，介紹了很多關(guān)于setTimeout函數(shù)的神奇使用，今天來(lái)介紹下第一個(gè)——使用setTimeout代替setInterval進(jìn)行間歇調(diào)用。

　　書(shū)中是這么說(shuō)的

“在開(kāi)發(fā)環(huán)境下，很少使用間歇調(diào)用（setInterval），原因是后一個(gè)間歇調(diào)用很可能在前一個(gè)間歇調(diào)用結(jié)束前啟動(dòng)”。

　　這話怎么理解呢？

　　首先我們來(lái)看一下一般情況下的setInterval函數(shù)的使用，以及如何使用setTimeout代替setInterval

var executeTimes = 0;

var intervalTime = 500;

var intervalId = null;

 

// 放開(kāi)下面的注釋運(yùn)行setInterval的Demo

intervalId = setInterval(intervalFun,intervalTime);

// 放開(kāi)下面的注釋運(yùn)行setTimeout的Demo

// setTimeout(timeOutFun,intervalTime);

 

function intervalFun(){

executeTimes++;

console.log("doIntervalFun——"+executeTimes);

if(executeTimes==5){

clearInterval(intervalId);

}

}

 

function timeOutFun(){

executeTimes++;

console.log("doTimeOutFun——"+executeTimes);

if(executeTimes<5){

setTimeout(arguments.callee,intervalTime);

}

}

　　代碼比較簡(jiǎn)單，我們只是在setTimeout的方法里面又調(diào)用了一次setTimeout，就可以達(dá)到間歇調(diào)用的目的。

　　重點(diǎn)來(lái)了，為什么作者建議我們使用setTimeout代替setInterval呢？setTimeout式的間歇調(diào)用和傳統(tǒng)的setInterval間歇調(diào)用有什么區(qū)別呢？

　　區(qū)別在于，setInterval間歇調(diào)用，是在前一個(gè)方法執(zhí)行前，就開(kāi)始計(jì)時(shí)，比如間歇時(shí)間是500ms，那么不管那時(shí)候前一個(gè)方法是否已經(jīng)執(zhí)行完畢，都會(huì)把后一個(gè)方法放入執(zhí)行的序列中。這時(shí)候就會(huì)發(fā)生一個(gè)問(wèn)題，假如前一個(gè)方法的執(zhí)行時(shí)間超過(guò)500ms，加入是1000ms，那么就意味著，前一個(gè)方法執(zhí)行結(jié)束后，后一個(gè)方法馬上就會(huì)執(zhí)行，因?yàn)榇藭r(shí)間歇時(shí)間已經(jīng)超過(guò)500ms了。

　　書(shū)中沒(méi)有給出代碼證明這個(gè)結(jié)論，于是自己寫(xiě)了一段代碼來(lái)驗(yàn)證。

var executeTimes = 0;

var intervalTime = 500;

var intervalId = null;

var oriTime = new Date().getTime();

 

// 放開(kāi)下面的注釋運(yùn)行setInterval的Demo

intervalId = setInterval(intervalFun,intervalTime);

// 放開(kāi)下面的注釋運(yùn)行setTimeout的Demo

// setTimeout(timeOutFun,intervalTime);

 

function intervalFun(){

executeTimes++;

var nowExecuteTimes = executeTimes;

var timeDiff = new Date().getTime() - oriTime;

console.log("doIntervalFun——"+nowExecuteTimes+", after " + timeDiff + "ms");

var delayParam = 0;

sleep(1000);

console.log("doIntervalFun——"+nowExecuteTimes+" finish !");

if(executeTimes==5){

clearInterval(intervalId);

}

}

 

function timeOutFun(){

executeTimes++;

var nowExecuteTimes = executeTimes;

var timeDiff = new Date().getTime() - oriTime;

console.log("doTimeOutFun——"+nowExecuteTimes+", after " + timeDiff + "ms");

var delayParam = 0;

sleep(1000);

console.log("doTimeOutFun——"+nowExecuteTimes+" finish !");

if(executeTimes<5){

setTimeout(arguments.callee,intervalTime);

}

}

 

function sleep(sleepTime){

var start=new Date().getTime();

while(true){

　　if(new Date().getTime()-start>sleepTime){

　　break;

}

}

}

　?。ㄟ@里使用大牛提供的sleep函數(shù)來(lái)模擬函數(shù)運(yùn)行的時(shí)間）

　　執(zhí)行setInterval的Demo方法，看控制臺(tái)