快捷導(dǎo)航

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

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

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

【寫在前面的胡言亂語】

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

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

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

【這是正文】

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

　　書中是這么說的

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

　　這話怎么理解呢？

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

var executeTimes = 0;

var intervalTime = 500;

var intervalId = null;

 

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

intervalId = setInterval(intervalFun,intervalTime);

// 放開下面的注釋運(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);

}

}

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

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

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

　　書中沒有給出代碼證明這個結(jié)論，于是自己寫了一段代碼來驗(yàn)證。

var executeTimes = 0;

var intervalTime = 500;

var intervalId = null;

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

 

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

intervalId = setInterval(intervalFun,intervalTime);

// 放開下面的注釋運(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ù)來模擬函數(shù)運(yùn)行的時間）

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