JavaScript的定時器詳解

這次帶給大家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中文網其他相關文章！