The passage of time becomes distorted after a few hours of using setInterval

Question

The passage of time becomes distorted after a few hours of using setInterval

I created a simple digital clock using JavaScript to show the time on a TV screen. However, after several hours of running, I noticed that the displayed time gets off by a few seconds (around 30 or more).

Below is the code snippet I used:

  getTime() {

    const time = new Date();

    const formatter = Intl.DateTimeFormat('de-AT', {
        hour: "2-digit",
        minute: "2-digit"
    });

    return formatter.format(time);
  }

  updateClock() {
    this.clock = this.getTime();
  }

This function is called within a setInterval method:


 setInterval(() => {
      this.updateClock();
    }, 1000);

I'm puzzled as to why the time discrepancy occurs after some time has passed. Given that I create a new Date object each time, it should theoretically maintain accurate timekeeping.

EDIT: Upon further investigation, it appears that the inaccuracy stems from the internal clock of the TV itself, which drifts out of synchronization over extended periods (for unknown reasons). As the JavaScript DateTime relies on the TV's system time, which is incorrect, the displayed clock also becomes inaccurate.

javascript vue.js datetime time setinterval

Answer 1

Answer №1

Timers don't always run exactly when you expect them to. Sometimes there can be delays, especially with setInterval set to one second intervals.

If your timer is off by more than seconds, you may have too many intervals running at once and not storing the value for clearInterval. To fix this, try reducing the interval or using a delay of 1000 / 60 (60 FPS) instead. If it still doesn't work properly, it may be due to the browser or device saving power by pausing intervals until you interact with the main window again.

Try adjusting the interval timing to see if that helps improve performance based on the specific needs of your code and environment.

Answer 2

Timers don't always run exactly when you expect them to. Sometimes there can be delays, especially with setInterval set to one second intervals.

If your timer is off by more than seconds, you may have too many intervals running at once and not storing the value for clearInterval. To fix this, try reducing the interval or using a delay of 1000 / 60 (60 FPS) instead. If it still doesn't work properly, it may be due to the browser or device saving power by pausing intervals until you interact with the main window again.

Try adjusting the interval timing to see if that helps improve performance based on the specific needs of your code and environment.

Answer 3

Answer №2

In order to efficiently manage the interval, I suggest storing the identifier returned by setInterval. This way, you can easily start and stop the interval when needed.

By updating the current time every second, you can ensure that the formatted time is accurate at all times.

Here's an improved example showcasing the use of a class:

class ClockManager {
  constructor({ formatter, renderer }) {
    this.formatter = formatter;
    this.renderer = renderer;
    this.time = '';
  }
  update() {
    this.time = this.formatter.format(new Date());
    if (this.renderer instanceof Function) {
      this.renderer(this);
    }
  }
  start() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    this.update(); // Initial call
    this.intervalId = setInterval(() => {
      this.update(); // Call every second
    }, 1000);
  }
  stop() {
    clearInterval(this.intervalId);
    this.intervalId = undefined;
  }
}

const clockElement = document.querySelector('#clock');

const clockInstance = new ClockManager({
  formatter: Intl.DateTimeFormat('de-AT', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }),
  renderer: (clockRef) => {
    clockElement.innerText = clockRef.time;
  }
});
clockInstance.start();

<div id="clock"></div>

Answer 4

In order to efficiently manage the interval, I suggest storing the identifier returned by setInterval. This way, you can easily start and stop the interval when needed.

By updating the current time every second, you can ensure that the formatted time is accurate at all times.

Here's an improved example showcasing the use of a class:

class ClockManager {
  constructor({ formatter, renderer }) {
    this.formatter = formatter;
    this.renderer = renderer;
    this.time = '';
  }
  update() {
    this.time = this.formatter.format(new Date());
    if (this.renderer instanceof Function) {
      this.renderer(this);
    }
  }
  start() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    this.update(); // Initial call
    this.intervalId = setInterval(() => {
      this.update(); // Call every second
    }, 1000);
  }
  stop() {
    clearInterval(this.intervalId);
    this.intervalId = undefined;
  }
}

const clockElement = document.querySelector('#clock');

const clockInstance = new ClockManager({
  formatter: Intl.DateTimeFormat('de-AT', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }),
  renderer: (clockRef) => {
    clockElement.innerText = clockRef.time;
  }
});
clockInstance.start();

<div id="clock"></div>

The passage of time becomes distorted after a few hours of using setInterval

Answer №1

Answer №2

Similar questions

Encountering an "AJAX not a function" error while using the d3/flask interface

updating the row of an html table with elements from a javascript object

Exploring ways to run tests on a server REST API using testem

Troubleshooting Guide: Issues with Bootstrap 3 Modal Window Implementation

Is React the ideal choice for implementing a shared state subscription mechanism in your project?

The input field does not accept any values even after setting it to be editable

JavaScript class name modifications are not functioning as expected

`A brief disruption in loading the visual style of Google Maps`

Exploring Nested Objects within a v-for Loop

Issue with format: The time data '22.12.2012 17:00' does not align with the specified format '%d.%m.%Y %I:%M', am/pm

Please ensure you have selected at least one item before submitting the form

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

Stop the interval when hovering and start the interval when moving the mouse away

Using knockout to retrieve the attribute value with an onClick event

Is there a way to pass the ng-repeat value or ID to my dynamically appended element? If so, how can I achieve

The function you are trying to call is not valid... the specified type does not have any call signatures [ts 2349

Dynamically showing a div using JavaScript and AJAX after changing the window location

Merge the JSON data with the Node.js/Express.js response

React - the use of nested objects in combination with useState is causing alterations to the initial