如何在 JavaScript 中建立準確的計時器？

在JavaScript 中建立準確的計時器

由於setTimeout() 和setInterval( 的不精確性質，在JavaScript 中確定準確的時間間隔可能具有挑戰性).

不準確setTimeout() 和setInterval()

setTimeout() 和 setInterval() 依賴瀏覽器的調度機制，該機制可能受到系統資源和瀏覽器活動的影響。這種固有的可變性可能會導致不一致和不可靠的計時，如給定的範例所示。

解決方案：使用日期物件

要建立準確的計時器，請考慮使用 Date物件的 now() 方法來擷取目前毫秒時間戳記。與基於回調的方法相比，這種方法提供了更好的精度。

簡單計時器實作：

對於基本計時場景，您可以使用以下方法明確追蹤時間差:

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

此方法追蹤自計時器啟動以來的時間差。為了避免潛在的值跳躍，建議更頻繁地更新間隔（例如，每 100 毫秒）。

自調整計時器

對於精確、非漂移的間隔，您可以實現自我調整計時器。這些計時器會根據實際經過的時間調整每次重複逾時的延遲：

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // drift
    ...
    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // adjust delay for drift
}

這種方法可以監控時間漂移並補償任何不一致，確保更準確的計時節奏。

以上是如何在 JavaScript 中建立準確的計時器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！