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);
總結
事件迴圈是 JavaScript 處理非同步操作的核心機制，透過呼叫棧、任務佇列和微任務佇列的協調工作，實現了非阻塞 I/O 操作。
雖然 setTimeout 的定時精度受到事件迴圈的影響，但透過結合 Date 物件和遞迴的 setTimeout，或者使用 requestAnimationFrame，可以實現更爲準確的定時器。
