在Javascript中,如何创建一个精确到毫秒的计时器?

lh80um4z  于 2023-02-11  发布在  Java
关注(0)|答案(3)|浏览(181)

我看过Javascript毫秒计时器演示HERE
但是,我发现它非常不准确,因为它使用setInterval每次增加一ms。
有没有人知道如何在JS中轻松实现精确的毫秒计时器?是否必须使用Date对象来完成?

wfsdck30

wfsdck301#

精确计时器使用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
5ktev3wc

5ktev3wc2#

是的。使用Date会精确得多。setInterval不会“精确地”每毫秒触发一次。

var startTime, interval;

function start(){
    startTime = Date.now();
    interval = setInterval(function(){
        updateDisplay(Date.now() - startTime);
    });
}

function stop(){
    clearInterval(interval);
}

function updateDisplay(currentTime){
    // do your stuff
}
2jcobegt

2jcobegt3#

setInterval可以切换为

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

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

相关问题