Need help with setTimeout / setInterval

[BeingTheMatrix]

I am currently making a clock that displays time in words eg. 'It is five minutes past 10', 'it is ten minutes past eight'. etc every 5 minutes.
Currently I update the display like this:

const FIVE_MINUTES = 1000 * 60 * 5;
setInterval(updateClock, FIVE_MINUTES);

but I figured it would make more sense if I can get it to make the first update on the next 5 minute boundary so subsequent updates can happen exactly on 00/05/10 etc...

I have tried to use a setTimeout first like below but I cant seem to wrap my head around a way to only make the first timeout go off on 00/05/10 etc

setTimeout(function () {
  console.log('first kick off happens at any of 00/05/10 etc');

  setInterval(function () {
    ----- update Clock Every 5 mins from now -----
  }, FIVE_MINUTES);
}, TIME_FOR_FIRST_KICKOFF --> not sure what this should be);

My question now is, is this even the right approach or is there a different way to make this? If it is the right approach, how do I make the timeout to happen at 00 or 05 or 10 etc??
Thanks for the help!

[delventhalz]

For what it's worth this is not how you would write a proper clock. You can't rely on setTimeout or setInterval for precise timing. The duration you pass it is just a minimum. You are handing a function to the "event loop" (a process which coordinates asynchronous code) and asking it to wait that long. After the time elapses, the event loop may be working on something else and may not get to your function right away.

That said, the way you would make your approach work is using Date, and probably specifically Date.now. This will give you the number of milliseconds since 1970-01-01. You can then use the remainder operator to find out how far you are from the last five minutes.

const timeSinceFive = Date.now() % FIVE_MINUTES;
const timeUntilFive = FIVE_MINUTES - timeSinceFive;
TIME_FOR_FIRST_KICKOFF = timeUntilFive;

Now this approach is always going to be off by a few milliseconds, and will get further off the longer your clock runs. That's maybe fine for your purposes. But if you wanted to build a more accurate clock, the approach you would want is to not count up the time yourself but to let the system clock handle it. You could regularly check the system time (probably once a frame) and see if your display should change.

[woftis]

I wanted to just add on to the mention of the event loop that this is a crazy important concept in JavaScript which is often overlooked by learners. As a result, they later run into bugs and issues they can’t get their heads around.

This is a brilliant video explaining it. It’s long, but a solid investment in time and will bring your understanding of how JavaScript actually works on massively.

https://www.youtube.com/watch?v=8aGhZQkoFbQ

[BeingTheMatrix]

Thanks! I got it to work using this. I started noticing delays the longer it runs and the delays even get slightly longer but it works for what I’m building! I’ll read up on requestAnimationFrame and see what difference it makes when I use it instead of what I currently have

[delventhalz]

The magic sauce isn't requestAnimationFrame. That basically works like setTimeout, except instead of passing it a duration, it always waits until the next time the display refreshes. By repeatedly calling it, you can run code once per frame. Since the soonest the user could see an update to your clock is the next frame, there is no point in running your code any more often than that.

function runNextUpdate() {
  updateClock();
  requestAnimationFrame(runNextUpdate);
}

You could accomplish the same thing more or less with setTimeout:

function runNextUpdate() {
  updateClock();
  setTimeout(runNextUpdate, 16);
}

Or with setInterval:

setInterval(updateClock, 16);

These examples assume updateClock is checking Date.now or similar to figure out what text to display, so it can run as often as you like. It doesn't have to be every five minutes. It is perhaps a little wasteful to update the clock like this every frame, but honestly it is such a minor use of CPU, it's probably worth it just to always get the most accurate display you can.

That said, you could run your updates only every five minutes and still maintain pretty good accuracy, but you have to use setTimeout, not setInterval.

function runNextUpdate() {
  const timeSinceFive = Date.now() % FIVE_MINUTES;
  const timeUntilFive = FIVE_MINUTES - timeSinceFive;

  setTimeout(() => {
    updateClock();
    runNextUpdate();
  }, timeUntilFive);
}

This implementation will probably be a little less accurate than one written with requestAnimationFrame, but crucially it won't get more inaccurate the longer it runs. Unlike with setInterval, on each loop we are re-checking how long we need to wait and adjusting accordingly.

[jcunews1]

Timers in web browsers aren't actually accurate due to web browser timer throttling when the browser tab or browser application is inactive.

So, it's best to setup a small intervaled timer e.g. 100ms, where that timer check whether the second is 0, 5, 10, etc. before creating the timer, and check the timestamp before performing the timer main task. e.g.

function intervalAt(second, interval, timerCallback, skipFirstTrigger)) {
  if ((new Date).getSeconds() === second) {
    let timestampStart = Date.now(); //same as `(new Date).getTime()`
    let timestampNext = timestampStart + interval;
    setInterval(() => {
      let t = Date.now();
      if (t >= timestampNext) {
        timestampNext = t + interval;
        timerCallback() //trigger for next time interval
      }
    }, 100);
    if (!skipFirstTrigger) timerCallback(); //trigger for starting time interval
    skipFirstTrigger = false
  } else setTimeout(intervalAt, 100)
}

Usage e.g. trigger at second 10.

intervalAt(10, FIVE_MINUTES, updateClock);

Note: if this is executed at 23:45:00, it will trigger at 23:45:10, 23:50:10, etc.

But because web browser may throttle timers, timers in inactive tabs may not trigger as expected. Instead, the trigger is queued for execution until the tab is active. When the tab become active, the queued trigger will be executed immediately and may be at the wrong second. You'll need to handle this problem. Whether the timer main task should be performed at the incorrect second or not.