setTimeout函數(shù)的神奇使用
【寫在前面的胡言亂語】
自從大三開始實習(xí)之后,就沒有寫博客了,雖然學(xué)了很多東西,但是如果沒有進行總結(jié)和分享,學(xué)的東西就很容易忘記,而且不進行分享,就不會手動去敲代碼,這樣對知識的理解就不夠透徹。
現(xiàn)在畢業(yè)半年多了,最近學(xué)習(xí)了《JavaScript高級程序設(shè)計》這本書,受益匪淺,看了才知道雖然自己寫了那么多JS,但是對JS的理解最多就只是中下水平。
現(xiàn)在看第二遍,邊看邊敲代碼,邊分享,希望看到這篇文章的你,能有所收獲。
【這是正文】
《JavaScript高級程序設(shè)計》這本書里面,介紹了很多關(guān)于setTimeout函數(shù)的神奇使用,今天來介紹下第一個——使用setTimeout代替setInterval進行間歇調(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; // 放開下面的注釋運行setInterval的Demo intervalId = setInterval(intervalFun,intervalTime); // 放開下面的注釋運行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,就可以達到間歇調(diào)用的目的。
重點來了,為什么作者建議我們使用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í)行,因為此時間歇時間已經(jīng)超過500ms了。
書中沒有給出代碼證明這個結(jié)論,于是自己寫了一段代碼來驗證。
var executeTimes = 0; var intervalTime = 500; var intervalId = null; var oriTime = new Date().getTime(); // 放開下面的注釋運行setInterval的Demo intervalId = setInterval(intervalFun,intervalTime); // 放開下面的注釋運行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ù)運行的時間)
執(zhí)行setInterval的Demo方法,看控制臺
可以發(fā)現(xiàn),fun2和fun1開始的間歇接近1000ms,剛好就是fun1的執(zhí)行時間,也就意味著fun1執(zhí)行完后fun2馬上就執(zhí)行了,和我們間歇調(diào)用的初衷背道而馳。
我們注釋掉setInterval的Demo方法,放開setTimeout的Demo方法,運行,查看控制臺
這下終于正常了,fun1和fun2相差了1500ms = 1000 + 500,fun2在fun1執(zhí)行完的500ms后執(zhí)行。
不知道你有沒有和我一樣腦洞大開,反正我是感覺視野又開闊了一點,setTimeout的妙用還有很多,下次接著聊!
- 深入理解setTimeout函數(shù)和setInterval函數(shù)
- setTimeout函數(shù)兼容各主流瀏覽器運行執(zhí)行效果實例
- 解決火狐瀏覽器下JS setTimeout函數(shù)不兼容失效不執(zhí)行的方法
- jQuery setTimeout()函數(shù)使用方法
- js函數(shù)setTimeout延遲執(zhí)行的簡單介紹
- JS中setInterval、setTimeout不能傳遞帶參數(shù)的函數(shù)的解決方案
- js函數(shù)使用技巧之 setTimeout(function(){},0)
- javascript setTimeout()傳遞函數(shù)參數(shù)(包括傳遞對象參數(shù))
- 定時器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法
- 給c#添加SetTimeout和SetInterval函數(shù)
相關(guān)文章
javascript數(shù)組元素刪除方法delete和splice解析
這篇文章主要介紹了javascaipt數(shù)組元素刪除方法delete和splice解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12javascript DOM編程實例(智播客學(xué)習(xí))
最近一直在努力學(xué)習(xí)DOM編程這塊,這是目前成就感最強烈的一塊了,畢老師很認真的給我們講解了相關(guān)知識,并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁作為例程給我們進行講解2009-11-11