如何创建避免漂移的准确 JavaScript 计时器？-js教程-PHP中文网

如何创建避免漂移的准确 JavaScript 计时器？

Linda Hamilton

发布： 2024-12-14 16:01:12

原创

528 人浏览过

How Can I Create Accurate JavaScript Timers That Avoid Drifting?

创建准确的 JavaScript 计时器

计时器在 JavaScript 中调度任务和实现实时功能方面发挥着至关重要的作用。然而，由于 JavaScript 执行的异步特性，确保计时器的准确性可能具有挑战性。

setInterval/setTimeout 不准确

您提供的代码片段利用 setInterval 函数每隔一段时间递增一个计数器第二。然而，您观察到，3600 秒后，计数器仅达到约 3500 秒。这是因为 setInterval 和 setTimeout 本质上并不准确。随着时间的推移，它们很容易出现延迟和漂移。

使用 Date 对象进行精确计时

要创建准确的计时器，建议使用 Date 对象。 Date 对象允许您获取毫秒精度的当前时间。您可以将计时器的逻辑基于当前时间和开始时间之间的差异，如下所示：

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

登录后复制

自调整计时器

适用于需要恒定间隔而不漂移的计时器应用程序，自调节定时器是更好的选择。它们根据实际经过的时间动态调整超时之间的延迟。这种方法可确保计时器保持在正轨上：

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // the drift (positive for overshooting)
    ... // do what is to be done
    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // take into account drift
}

登录后复制

以上是如何创建避免漂移的准确 JavaScript 计时器？的详细内容。更多信息请关注PHP中文网其他相关文章！