In Javascript, how to create an accurate timer with milliseconds?

问题

I saw a Javascript milliseconds timer demo HERE

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

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

回答1:

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.

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

回答2:

Yes. Using Date will be much more accurate. setInterval will not be triggered 'exactly' each milliseconds.

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
}

回答3:

setInterval could be switchet with

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

this will make a setTimeout function to be endless called, and set again. It seems that setTimeout, has bigger priority than setInterval, which could be delayed.

来源：https://stackoverflow.com/questions/32307483/in-javascript-how-to-create-an-accurate-timer-with-milliseconds

标签

javascript

jquery

html

timer