Question

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

但是，我发现它非常不准确，因为它每次使用setInterval增加1毫秒。

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

Answer 1

准确的计时器使用div{ POSITION: relative; TOP: 450px; LEFT: 651px; width: calc(100% - 651px); float: left; }或setTimeout()定期更新显示，但绝不计算实际时间。由于Javascript的单线程性质，定时器事件可能不会在正确的时间间隔发生，但是对setInterval()的调用将始终为您提供准确的当前系统时间。

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

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

＆＃13;

Date.now()

＆＃13;

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

＆＃13;

Answer 2

是。使用Date会更加准确。 setInterval不会被触发＆＃39;确切地说＆＃39;每毫秒。

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
}

Answer 3

setInterval可以用

切换

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

这将使setTimeout函数无限调用，并再次设置。似乎setTimeout的优先级高于setInterval，可能会延迟。

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

3 个答案: