首頁 > web前端 > js教程 > JavaScript的定時器詳解

JavaScript的定時器詳解

php中世界最好的语言
發布: 2018-03-16 15:32:33
原創
1674 人瀏覽過

這次帶給大家JavaScript計時器詳解,使用JavaScript的計時器注意事項有哪些,下面就是實戰案例,一起來看一下。

除了放置非同步任務的事件,"任務佇列"還可以放置定時事件,即指定某些程式碼在多少時間之後執行。這叫做"定時器"(timer)功能,也就是定時執行的程式碼。

計時器功能主要由setTimeout()和setInterval()這兩個函數來完成,它們的內部運作機製完全一樣,差別在於前者指定的程式碼是一次執行,後者則為重複執行。以下主要討論setTimeout()。

setTimeout()接受兩個參數,第一個是回呼函數,第二個是延遲執行的毫秒數。

console.log(1);setTimeout(function(){console.log(2);},1000);console.log(3);

上面程式碼的執行結果是1,3,2,因為setTimeout()將第二行延後到1000毫秒之後執行。

如果將setTimeout()的第二個參數設為0,就表示目前程式碼執行完(執行堆疊清空)以後,立即執行(0毫秒間隔)指定的回呼函數。

setTimeout(function(){console.log(1);}, 0);console.log(2);

上面程式碼的執行結果總是2,1,因為只有執行完第二行以後,系統才會去執行"任務佇列"中的回呼函數。

總之,setTimeout(fn,0)的意思是,指定某個任務在主執行緒最早可得的空閒時間執行,也就是說,盡可能早得執行。它在"任務佇列"的尾部新增一個事件,因此要等到同步任務和"任務佇列"現有的事件都處理完,才會執行。

HTML5標準規定了setTimeout()的第二個參數的最小值(最短間隔),不得低於4毫秒,如果低於這個值,就會自動增加。在此之前,舊版的瀏覽器都將最短間隔設為10毫秒。另外,對於那些DOM的變動(尤其是涉及頁面重新渲染的部分),通常不會立即執行,而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果比setTimeout()好。

要注意的是,setTimeout()只是將事件插入了"任務佇列",必須等到目前程式碼(執行堆疊)執行完,主執行緒才會去執行它指定的回呼函數。要是當前程式碼耗時很長,有可能要等很久,所以沒有辦法保證,回呼函數一定會在setTimeout()指定的時間執行。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JavaScript運行機制之Event Loop

#JavaScript運行機制之事件與回呼函數

JavaScript執行機制之任務佇列

#

以上是JavaScript的定時器詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板