為什麼 JavaScript 的 `setTimeout()` 和 `setInterval()` 不準確，如何建立更精確的計時器？

準確的 JavaScript 計時器：分析

許多開發人員通常使用 setTimeout() 或 setInterval() 方法來建立計時器。然而，這些方法缺乏準確性保證。他們可能會遇到任意滯後，偏離預期的速度。

不準確的原因

固有的問題源自於 setTimeout() 和 setInterval() 所使用的機制。這些函數依賴瀏覽器的事件循環，不能保證以一致的時間間隔執行。實際執行時間可能會因瀏覽器負載、系統資源和其他因素而異。

建立準確的計時器

要解決此問題，開發人員應該利用Date 物件來獲取準確（毫秒精度）的時間戳記。隨後，他們的邏輯應該基於當前時間值，而不是依賴執行計數。

對於簡單的計時器或時鐘，明確維護時間差是一種可行的方法：

var start = Date.now();
setInterval(function() {
    var delta = Date.now() - start; // milliseconds elapsed since start
    // ...
    // Output in seconds
    console.log(Math.floor(delta / 1000));
}, 1000);

然而，由於間隔執行中的潛在滯後，該技術可能會導致值跳躍。為了緩解這種情況，開發人員可以考慮更頻繁地更新間隔，例如每 100 毫秒更新一次。

進階技術：自我調整計時器

對於沒有漂移的穩定間隔，自我調整計時器- 調整計時器提供了先進的解決方案。這些計時器會根據實際經過的時間動態調整後續執行之間的延遲：

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // drift
    if (dt > interval) {
        // Handling severe drift here
    }
    // ... Perform desired action

    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // Adjust delay to correct for drift
}

以上是為什麼 JavaScript 的 `setTimeout()` 和 `setInterval()` 不準確，如何建立更精確的計時器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！