您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在JavaScript中创建准确的计时器?

如何在JavaScript中创建准确的计时器?

为什么不准确?

因为您正在使用setTimeout()或setInterval()。他们不能被信任,没有针对他们的准确性保证。它们被允许 任意滞后,并且它们不能保持恒定的步伐而是趋向于漂移(如您所观察到的)。

如何创建准确的计时器?

使用该Date对象来获取(毫秒)准确的当前时间。然后,将逻辑基于当前时间值,而不是计算回调执行的频率。

对于一个简单的定时器或时钟,跟踪时间的 明确:

var start = Date.Now();
setInterval(function() {
    var delta = Date.Now() - start; // milliseconds elapsed since start
    …
    output(Math.floor(delta / 1000)); // in seconds
    // alternatively just show wall clock time:
    output(new Date().toUTCString());
}, 1000); // update about every second

现在,这可能会出现值跳跃的问题。当间隔滞后一点,并执行后回调9901993299639995002毫秒,你会看到第二计01235(!)。因此,建议更频繁地进行更新(例如大约每100毫秒一次),以免发生此类跳跃。

但是,有时您确实需要一个稳定的时间间隔来执行回调而不会产生偏差。尽管它的收益很高(并且注册的超时时间更少),但这需要更具优势的策略(和代码)。这些被称为 计时器。与预期的时间间隔相比,此处每个重复超时的确切延迟都适合于实际经过的时间:

var interval = 1000; // ms
var expected = Date.Now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.Now() - expected; // the drift (positive for overshooting)
    if (dt > interval) {
        // something really bad happened. Maybe the browser (tab) was inactive?
        // possibly special handling to avoid futile "catch up" run
    }
    … // do what is to be done

    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // take into account drift
}
javascript 2022/1/1 18:19:56 有514人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶