如何在 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中文网其他相关文章！