在Javascript中,如何用毫秒创建一个准确的计时器？

Question

我在这里看到了一个Javascript毫秒计时器演示

但是,我发现它非常不准确,因为它setInterval每次增加1毫秒.

有没有人有关于如何在JS中轻松实现精确的毫秒计时器的想法？是否必须使用Date对象完成？

Answer 1

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

因此,相反,您总是使用类似的方式Date.now()来获取当前时间并将其与之前的时间进行比较以计算实际经过的时间.这将与计算机上的系统时钟一样准确.

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

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

Answer 2

setInterval 可以切换为

var x = 100; //ms time
var incrementFunction = function(){
     //increment the watch/clock code
 setTimeout(incrementFunction,x);
};
incrementFunction();

这将使setTimeout函数被无休止地调用，并再次设置。看来setTimeout比setInterval有更大的优先级，后者可能会延迟。