JavaScript 事件循環竟還能這樣玩!

JavaScript 是一種單線程的編程語言，這意味著它一次只能執行一個任務。為了能夠處理異步操作，JavaScript 使用了一種稱為事件循環（Event Loop）的機制。
本文將深入探討事件循環的工作原理，并展示如何基于這一原理實現一個更為準確的 setTimeout、setInterval

什么是事件循環？

事件循環是 JavaScript 運行時環境中處理異步操作的核心機制。它允許 JavaScript 在執行任務時不會阻塞主線程，從而實現非阻塞 I/O 操作。

為了理解事件循環，首先需要了解以下幾個關鍵概念：

調用棧（Call Stack）：
- 調用棧是一個 LIFO（后進先出）結構，用于存儲當前執行的函數調用。當一個函數被調用時，它會被推入調用棧，當函數執行完畢后，它會從調用棧中彈出。
任務隊列（Task Queue）：
- 任務隊列存儲了所有等待執行的任務，這些任務通常是異步操作的回調函數，例如 setTimeout、setInterval、I/O 操作等。當調用棧為空時，事件循環會從任務隊列中取出一個任務并將其推入調用棧執行。
微任務隊列（Microtask Queue）：
- 微任務隊列存儲了所有等待執行的微任務，這些微任務通常是 Promise 的回調函數、MutationObserver 等。微任務隊列的優先級高于任務隊列，當調用棧為空時，事件循環會優先處理微任務隊列中的所有任務，然后再處理任務隊列中的任務。

事件循環的工作原理

事件循環的工作原理可以簡化為以下幾個步驟：

執行調用棧中的任務：
- JavaScript 引擎會從調用棧中取出并執行最頂層的任務，直到調用棧為空。
處理微任務隊列：
- 當調用棧為空時，事件循環會檢查微任務隊列。如果微任務隊列中有任務，會依次取出并執行，直到微任務隊列為空。
處理任務隊列：
- 當調用棧和微任務隊列都為空時，事件循環會檢查任務隊列。如果任務隊列中有任務，會取出一個任務并將其推入調用棧執行。
重復上述步驟：
- 事件循環會不斷重復上述步驟，確保所有任務都能被及時處理。

示例

以下是一個簡單的示例，展示事件循環的工作原理：

console.log('Start');setTimeout(() => {console.log('Timeout callback');
}, 0);Promise.resolve().then(() => {console.log('Promise callback');
});console.log('End');

輸出結果：

Start
End
Promise callback
Timeout callback

解釋如下：

同步任務：首先執行同步任務，console.log('Start') 和 console.log('End') 被推入調用棧并立即執行。
微任務：Promise.resolve().then 創建了一個微任務，該微任務被推入微任務隊列。
任務：setTimeout 創建了一個任務，該任務被推入任務隊列。
處理微任務：同步任務執行完畢后，調用棧為空，事件循環檢查微任務隊列并執行所有微任務，因此輸出 Promise callback。
處理任務：微任務隊列為空后，事件循環檢查任務隊列并執行所有任務，因此輸出 Timeout callback。

為什么 `setTimeout` 不準確？

JavaScript 中的 setTimeout 和 setInterval 是基于事件循環和任務隊列的，因此它們的執行時間可能會受到以下幾個因素的影響，從而導致不準確：

事件循環機制：
- JavaScript 是單線程的，所有代碼的執行都是在一個事件循環中進行的。事件循環會依次處理任務隊列中的任務。
- 如果前面的任務執行時間較長，或者任務隊列中有很多任務，定時器的回調函數就會被延遲執行。
任務隊列的優先級：
- 瀏覽器的任務隊列有不同的優先級，例如用戶交互事件、渲染更新等任務的優先級通常高于 setTimeout 和 setInterval。
- 這意味著即使定時器到期，如果有其他高優先級任務在執行，定時器的回調函數也會被延遲執行。
JavaScript 引擎的限制：
- JavaScript 引擎通常會對最小時間間隔進行限制。例如，在瀏覽器環境中，嵌套的 setTimeout 調用的最小時間間隔通常是 4 毫秒。
- 這意味著即使你設置了一個非常短的時間間隔，實際執行的時間間隔也可能會比你設置的時間更長。
系統性能和負載：
- 系統的性能和當前負載也會影響定時器的準確性。如果系統負載較高，任務的執行時間可能會被進一步延遲。

為了更直觀地理解這一點，可以考慮以下示例：

console.log('Start');setTimeout(() => {console.log('Timeout callback');
}, 1000);const start = Date.now();
while (Date.now() - start < 2000) {// 模擬一個耗時2秒的任務
}console.log('End');

在這個示例中，setTimeout 的回調函數設置為 1 秒后執行，但由于在主線程上有一個耗時 2 秒的任務，導致定時器的回調函數被延遲到這個任務執行完畢后才執行。

因此，實際執行時間會遠遠超過 1 秒。

實現一個更準確的 setTimeout

為了實現更精確的定時器，可以結合 Date 對象和遞歸的 setTimeout 來實現更高精度的定時器。

以下是一個實現準時 setTimeout 的例子：

function preciseTimeout(callback, delay) {const start = Date.now();function loop() {const now = Date.now();const elapsed = now - start;const remaining = delay - elapsed;if (remaining <= 0) {callback();} else {setTimeout(loop, remaining);}}setTimeout(loop, delay);
}// 使用示例
preciseTimeout(() => {console.log('This is a precise timeout callback');
}, 1000); // 1秒

在這個實現中：

獲取當前時間 start。
在 loop 函數中不斷計算已經過去的時間 elapsed 和剩余時間 remaining。
如果剩余時間 remaining 小于等于 0，就調用回調函數 callback。
如果剩余時間 remaining 大于 0，就使用 setTimeout 遞歸調用 loop 函數。

這種方法能比直接使用 setTimeout 更精確地執行定時任務。

進一步優化

上面的代碼還可以進一步優化，可以考慮使用 requestAnimationFrame 來實現更高精度的定時器。

requestAnimationFrame 是專門為動畫設計的，它會在瀏覽器下一次重繪之前調用指定的回調函數。由于瀏覽器的重繪通常是每秒 60 次（即每 16.67 毫秒一次），所以使用 requestAnimationFrame 可以實現更高精度的定時器。

以下是使用 requestAnimationFrame 實現的高精度定時器：

function preciseTimeout(callback, delay) {const start = Date.now();function loop() {const now = Date.now();const elapsed = now - start;if (elapsed >= delay) {callback();} else {requestAnimationFrame(loop);}}requestAnimationFrame(loop);
}// 使用示例
preciseTimeout(() => {console.log('This is a precise timeout callback');
}, 1000); // 1秒

在這個實現中，requestAnimationFrame 會在每次瀏覽器重繪之前調用 loop 函數，從而實現更高精度的定時器。

實現一個更準確的 setInterval

同樣地，我們可以通過結合 Date 對象和遞歸的 setTimeout 來實現更高精度的 setInterval。以下是一個實現準時 setInterval 的例子：

function preciseInterval(callback, interval) {let expected = Date.now() + interval;function step() {const now = Date.now();const drift = now - expected;if (drift >= 0) {callback();expected += interval;}setTimeout(step, interval - drift);}setTimeout(step, interval);
}// 使用示例
preciseInterval(() => {console.log('This is a precise interval callback');
}, 1000); // 每秒

在這個實現中：

設置預期的下一次執行時間 expected。
在 step 函數中不斷計算當前時間 now 和預期時間 expected 之間的偏差 drift。
如果偏差 drift 大于等于 0，就調用回調函數 callback，并更新預期時間 expected。
使用 setTimeout 遞歸調用 step 函數，并根據偏差 drift 調整下一次調用的時間間隔。

進一步優化

為了進一步優化，可以考慮使用 requestAnimationFrame 來實現更高精度的定時器。requestAnimationFrame 是專門為動畫設計的，它會在瀏覽器下一次重繪之前調用指定的回調函數。由于瀏覽器的重繪通常是每秒 60 次（即每 16.67 毫秒一次），所以使用 requestAnimationFrame 可以實現更高精度的定時器。

那我們使用 requestAnimationFrame 來實現的高精度 setInterval

function preciseSetInterval(callback, interval) {let expected = performance.now() + interval;function step() {const drift = performance.now() - expected;if (drift >= 0) {callback();expected += interval;}requestAnimationFrame(step);}requestAnimationFrame(step);
}// 使用示例
preciseSetInterval(() => {console.log('This runs every 2 seconds with higher precision');
}, 2000);