在 Javascript 中，如何创建一个精确的毫秒计时器? [英] In Javascript, how to create an accurate timer with milliseconds?

问题描述

我看到了一个 Javascript 毫秒计时器演示 HERE

I saw a Javascript milliseconds timer demo HERE

然而，我发现它非常不准确，因为它使用 setInterval 每次增加一毫秒.

However, I found it very inaccurate because it uses setInterval to increase one ms per time.

有谁知道如何在 JS 中轻松实现精确的毫秒计时器?是否必须使用 Date 对象来完成?

Does anyone have ideas about how to implement an accurate milliseconds timer in JS easily? Does it has to be done using Date object?

推荐答案

一个精确的计时器使用 setTimeout() 或 setInterval() 来定期更新显示，但从不来计算实际时间.由于 Javascript 的单线程特性，计时器事件可能不会恰好在正确的时间间隔发生，但对 Date.now() 的调用将始终为您提供准确的当前系统时间.

An accurate timer uses setTimeout() or setInterval() to regularly update a display, but NEVER to count the actual time. Because of Javascript's single threaded nature, a timer event may not occur exactly at the right time interval, but a call to Date.now() will always give you the exact current system time.

因此，您总是使用诸如 Date.now() 之类的东西来获取当前时间并将其与之前的某个时间进行比较以计算实际经过的时间.这将与计算机上的系统时钟一样准确.

So, instead, you always use something like Date.now() to get the current time and compare it to some previous time to calculate the actual elapsed time. This will be as accurate as the system clock on the computer is.

例如，这是一个工作计时器显示:

For example, here's a working timer display:

var startTime = Date.now();

var interval = setInterval(function() {
    var elapsedTime = Date.now() - startTime;
    document.getElementById("timer").innerHTML = (elapsedTime / 1000).toFixed(3);
}, 100);

<span id="timer"></span> s

这篇关于在 Javascript 中，如何创建一个精确的毫秒计时器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！