为什么 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中文网其他相关文章！