我看过Javascript毫秒计时器演示HERE但是,我发现它非常不准确,因为它使用setInterval每次增加一ms。有没有人知道如何在JS中轻松实现精确的毫秒计时器?是否必须使用Date对象来完成?
setInterval
Date
wfsdck301#
精确计时器使用setTimeout()或setInterval()定期更新显示,但从不计算实际时间。由于Javascript的单线程特性和事件驱动系统,计时器事件可能不会在正确的时间间隔发生,但调用Date.now()将始终为您提供准确的当前系统时间。因此,你总是使用类似Date.now()的函数来获取当前时间,并将其与之前的时间进行比较,以计算实际经过的时间,这将与计算机上的系统时钟一样精确。例如,下面是一个工作计时器显示:
setTimeout()
setInterval()
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
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 }
2jcobegt3#
setInterval可以切换为
var x = 100; //ms time var incrementFunction = function(){ //increment the watch/clock code setTimeout(incrementFunction,x); }; incrementFunction();
这将使setTimeout函数被无休止地调用,并被再次设置。2看起来setTimeout比setInterval有更高的优先级,这可能会被延迟。
3条答案
按热度按时间wfsdck301#
精确计时器使用
setTimeout()
或setInterval()
定期更新显示,但从不计算实际时间。由于Javascript的单线程特性和事件驱动系统,计时器事件可能不会在正确的时间间隔发生,但调用Date.now()
将始终为您提供准确的当前系统时间。因此,你总是使用类似
Date.now()
的函数来获取当前时间,并将其与之前的时间进行比较,以计算实际经过的时间,这将与计算机上的系统时钟一样精确。例如,下面是一个工作计时器显示:
5ktev3wc2#
是的。使用
Date
会精确得多。setInterval
不会“精确地”每毫秒触发一次。2jcobegt3#
setInterval可以切换为
这将使setTimeout函数被无休止地调用,并被再次设置。2看起来setTimeout比setInterval有更高的优先级,这可能会被延迟。