How Can I Create Accurate Timers in JavaScript?

Creating Accurate Timers in JavaScript

Determining accurate time intervals in JavaScript can be challenging due to the imprecise nature of setTimeout() and setInterval().

Inaccuracy of setTimeout() and setInterval()

setTimeout() and setInterval() rely on the browser's scheduling mechanisms, which can be influenced by system resources and browser activity. This inherent variability can lead to inconsistency and unreliable timing, as demonstrated in the given example.

Solution: Using Date Object

To create accurate timers, consider using the Date object's now() method to retrieve the current millisecond timestamp. This approach provides better precision compared to callback-based methods.

Simple Timer Implementation:

For basic timing scenarios, you can track the time difference explicitly using the following approach:

var start = Date.now();
setInterval(function() {
    var delta = Date.now() - start; // milliseconds since start
    ...
    output(Math.floor(delta / 1000)); // in seconds
}, 1000);

This method tracks the time difference since the start of the timer. To avoid potential value jumps, updating the interval more frequently (e.g., every 100ms) is recommended.

Self-Adjusting Timers

For precise, non-drifting intervals, you can implement self-adjusting timers. These timers adapt the delay for each repeated timeout based on the actual elapsed time:

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // drift
    ...
    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // adjust delay for drift
}

This approach monitors the time drift and compensates for any inconsistencies, ensuring a more accurate timing cadence.

The above is the detailed content of How Can I Create Accurate Timers in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!