DEV Community

Amit Merchant
Amit Merchant

Posted on

1

Handling time intervals in JavaScript

While working on an Electron app Pomolectron, I needed to handle different time intervals through setInterval() function of JavaScript.
I basically needed to implement three timers in my app:

  • Pomodoro of 25 minutes
  • Short break of 5 minutes
  • Long break of 10 minutes

I could think of two ways to implement countdown timer for all three cases. One, to implement different timers by using three different setInterval(). Second, finding another way to utilize the same setInterval() for all three timers.

Solution

So, I've tried my hands on the second approach. I can use the same setInterval() for all three timers by assigning it to a variable like below,

var pomodoroIntervalId;

function startTimer(duration, display) {
  timer = duration;
  pomodoroIntervalId = setInterval(function(){
    if (--timer < 0) {
        timer = duration;
    }

    minutes = parseInt(timer/60, 10);
    seconds = parseInt(timer%60, 10);

    minutes = minutes < 10 ? '0'+minutes : minutes;
    seconds = seconds < 10 ? '0'+seconds : seconds;

    display.textContent = minutes+ ":" + seconds;

    if(minutes == 0 && seconds == 0){
      notifyUser();
    }
  }, 1000);
}
Enter fullscreen mode Exit fullscreen mode

And then utilize the same startTimer() across other timers by first clearing the current time interval using clearInterval() method passing the interval ID. In our case I've assigned it to a global variable pomodoroIntervalId. This basically clears the currently running time interval, so that it can be utilized next time another timer has been set. The code would look like below...

function resetTimer() {
  clearInterval(pomodoroIntervalId);
}
Enter fullscreen mode Exit fullscreen mode

This gives us the benefit of using the same setInterval() function across fidderent use cases which makes the code clean and sleek. And I think it's a really handy feature of JavasScript.

Top comments (2)

Collapse
 
curtisautery profile image
Curtis Autery

I wouldn't use the seconds timer inside of your setInterval loop like that. The setInterval function attempts to fire on time, but doesn't if load if heavy. Running some quick tests with calculating primes while using your method for a counter, the true time and the counter's assumption about how much time had fast strayed quite a bit.

Instead of decrementing a timer once per interval, why don't you store the current date as a variable when the timer is instantiated? You can do the rest with creating new date objects and subtracting them from the start time to get elapsed milliseconds.

Collapse
 
amit_merchant profile image
Amit Merchant

Hey @curtis , This seems really good approach. I'll definitely try it in my app. Thanks!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay