Handling time intervals in JavaScript

Problem

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);}

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);}

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.

Happy coding!

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!