JS定時器

定時器主要由setTimeout()和setInterval()這兩個函數完成。

1.setTimeout()函數用來指定某個函數或某段代碼,在多少毫秒之后執(zhí)行。它返回一個整數,表示定時器的編號,以后可以用來取消這個定時器。
syntax:
<pre>
var timerId=setTimeout(func|code,delay)
</pre>

示例:
<pre>
function showTime(){
console.log(1);
}
setTimeout(showTime(),1000);//輸出結果為1
</pre>

注意:為了便于JavaScript引擎優(yōu)化代碼,setTimeout方法一般總是采用函數名的形式。

2.setInterval()
setInterval()函數的用法與setTimeout完全一致,區(qū)別僅僅在于setInterval指定某個任務每隔一段時間就執(zhí)行一次,也就是無限次的定時執(zhí)行。
示例:
<pre>
var timer=setInterval(function(){
console.log(2);
},1000);
</pre>

setInterval指定的是“開始執(zhí)行”之間的間隔,并不考慮每次任務執(zhí)行本身消耗所消耗的時間。因此實際上,兩次執(zhí)行之間的間隔會小于指定的時間。比如,setInterval指定每100ms執(zhí)行一次,每執(zhí)行需要5ms,那么第一次執(zhí)行結束后95毫秒,第二次執(zhí)行就會開始。如果某次執(zhí)行耗時特別長,比如需要105毫秒,那么它結束后,下一次執(zhí)行就會立即開始。
為確保兩次執(zhí)行之間有固定的時間間隔,可以不用setInterval,而是每次執(zhí)行結束之后,使用setTimeout指定下一次執(zhí)行的具體時間。
示例:
<pre>
var i=1;
var timer=setTimeout(function(){
alert(i++);
timer=setTimeout(arguments.callee,2000);
},2000);
</pre>

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

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

一直有一個疑問,如果setInterval里面的函數的執(zhí)行時間大于設定的時間間隔會怎么樣呢?
<pre>
setInterval(function(){
console.log(2);
},1000);

(function(){
sleepling(3000);
})();
</pre>

上面的第一行語句要求每隔1000毫秒,就輸出一個2。但是,第二行語句需要3000毫秒才能完成,這樣會發(fā)生的結果是:等到第二行語句運行完成以后,立刻連續(xù)輸出三個2,然后開始每隔1000毫秒,輸出一個2。也就是說,setIntervel具有累積效應,如果某個操作特別耗時,超過了setInterval的時間間隔,排在后面的操作會被累積起來,然后在很短的時間內連續(xù)觸發(fā),這可能或造成性能問題。

參考文章:定時器

版權歸王麗峰和饑人谷所有,若有轉載,請注明來源。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 從JS執(zhí)行機制說起 瀏覽器(或者說JS引擎)執(zhí)行JS的機制是基于事件循環(huán)。 由于JS是單線程,所以同一時間只能執(zhí)行...
    love2013閱讀 964評論 0 1
  • 前言:在引用開發(fā)中,我們經常需要在頁面中執(zhí)行一些周期性的操作,比如每隔一段時間就執(zhí)行某一固定的操作。而對于這樣的操...
    帥帥噠小白閱讀 5,422評論 1 3
  • 定時器 JavaScript提供定時執(zhí)行代碼的功能,叫做定時器(timer),主要由setTimeout()和se...
    李諾哦閱讀 1,092評論 0 0
  • 1. if name == 'main' 作用 簡單來說,就是這個語句只有在這個文件自己被執(zhí)行的時候才會true執(zhí)...
    JaiUnChat閱讀 259評論 0 0
  • 11月,廣州依然繁花葉茂! 來個禪繞花園也不錯! 慕卡,一直很喜歡的禪繞圖樣!多個變化組合一起,也不覺得雜亂,真是...
    芯之禪繞閱讀 481評論 0 4

友情鏈接更多精彩內容