JS提供了一些原生方法來實現延時去執行某一段代碼，下面來簡單介紹一下setTiemout、setInterval、setImmediate、requestAnimationFrame。

一、什么是定時器

JS提供了一些原生方法來實現延時去執行某一段代碼

setTimeout：

設置一個定時器，在定時器到期后執行一次函數或代碼段

var timeoutId = window.setTimeout(func[, delay, param1, param2, …]);
var timeoutId = window.setTimeout(code[, delay]);

var timeoutId; timeoutId = setTimeout(function () {console.log(1); }, 300);setTimeout(function () {clearTimeout(timeoutId); //清除定時器console.log(2); }, 100); setTimeout('console.log("5")', 400);// 分別輸出: 2、4

timeoutId: 定時器ID
func: 延遲后執行的函數
code: 延遲后執行的代碼字符串，不推薦使用原理類似eval()
delay: 延遲的時間（單位：毫秒），默認值為0
param1,param2: 向延遲函數傳遞而外的參數，IE9以上支持

setInterval:

以固定的時間間隔重復調用一個函數或者代碼段

var intervalId = window.setInterval(func, delay[, param1, param2, …]);
var intervalId = window.setInterval(code, delay);

var intervalId;intervalId = setInterval(function () {console.log(4);clearInterval(intervalId); //清除定時器 }, 200);

intervalId: 重復操作的ID
func: 延遲調用的函數
code: 代碼段
delay: 延遲時間，沒有默認值

setImmediate:

在瀏覽器完全結束當前運行的操作之后立即執行指定的函數(僅IE10和Node 0.10+中有實現)，類似setTimeout(func, 0)

var immediateId = setImmediate(func[, param1, param2, …]);
var immediateId = setImmediate(func);

immediateId: 定時器ID
func: 回調

requestAnimationFrame:

專門為實現高性能的幀動畫而設計的API，但是不能指定延遲時間，而是根據瀏覽器的刷新頻率而定（幀）

var requestId = window.requestAnimationFrame(func);
func: 回調

上面簡單的介紹了四種JS的定時器，而本文將會主要介紹比較常用的兩種：setTimeout和setInterval。

二、setInterval 和 setTimeout的區別？

1、在執行次數上有區別，setTimeout一次、setIntervaln次。
2、通過setTimeout模擬的setInterval與setInterval的區別則在于：setTimeout只有在回調完成之后才會去調用下一次定時器，而setInterval則不管回調函數的執行情況，當到達規定時間就會在事件隊列中插入一個執行回調的事件，所以在選擇定時器的方式時需要考慮setInterval的這種特性是否會對你的業務代碼有什么影響？

三、JS定時器的工作原理

這里將用引用How JavaScript Timers Work中的例子來解釋定時器的工作原理，該圖為一個簡單版的原理圖。

Timers 上圖中，左側數字代表時間，單位毫秒；左側文字代表某一個操作完成后，瀏覽器去詢問當前隊列中存在哪些正在等待執行的操作；藍色方塊表示正在執行的代碼塊；右側文字代表在代碼運行過程中，出現哪些異步事件。該圖大致流程如下：

• 程序開始時，有一個JS代碼塊開始執行，執行時長約為18ms，在執行過程中有3個異步事件觸發，其中包括一個setTimeout、鼠標點擊事件、setInterval
• 第一個setTimeout先運行，延遲時間為10ms，稍后鼠標事件出現，瀏覽器在事件隊列中插入點擊的回調函數，稍后setInterval運行，10ms到達之后，setTimeout向事件隊列中插入setTimeout的回調
• 當第一個代碼塊執行完成后，瀏覽器查看隊列中有哪些事件在等待，他取出排在隊列最前面的代碼來執行
• 在瀏覽器處理鼠標點擊回調時，setInterval再次檢查到到達延遲時間，他將再次向事件隊列中插入一個interval的回調，以后每隔指定的延遲時間之后都會向隊列中插入一個回調
• 后面瀏覽器將在執行完當前隊頭的代碼之后，將再次取出目前隊頭的事件來執行

這里只是對定時器的原理做一個簡單版的描述，實際的處理過程比這個復雜。

四、需要注意的點

• setTimeout有最小時間間隔限制，HTML5標準為4ms，小于4ms按照4ms處理，但是每個瀏覽器實現的最小間隔都不同
• 因為JS引擎只有一個線程，所以它將會強制異步事件排隊執行（生成一個定時器，將回調插入到事件隊列中，等待當前隊列中無任務執行時立即執行。）
• 如果setInterval的回調執行時間長于指定的延遲，setInterval將無間隔的一個接一個執行
  this的指向問題可以通過bind函數、定義變量、箭頭函數的方式來解決

五、參考

MDN
How JavaScript Timers Work
JavaScript定時器與執行機制解析

總結

以上是生活随笔為你收集整理的JS 定时器的4种写法及介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。