10/29/21, 10:56 AM Handling time intervals in JavaScript – Amit Merchant – A blog on PHP, JavaScript, and more

Amit Merchant
A blog on PHP, JavaScript, and more

Laravel
PHP
JavaScript
Git
Misc.

Handling time intervals in JavaScript Want to book an

Amit Merchant · March 15, 2017 · ⋆ JavaScript Ad slot here?
Sweet... let's talk
then!

W hile working on an Electron app Pomolectron, I needed to

handle different time intervals through setInterval()
function of JavaScript. I basically needed to implement three Newsletter
timers in my app:
Get the latest articles
delivered right to your
Pomodoro of 25 minutes
inbox!

Short break of 5 minutes

(Read a sample.)
Long break of 10 minutes
Email address
I could think of two ways to implement countdown timer for all
three cases. One, to implement different timers by using three
Subscribe
different setInterval() . Second, finding another way to utilize
By subscribing, you agree with

the same setInterval() for all three timers. Revue’s Terms of Service and
Privacy Policy.

Follow me ever ywhere

You may also like: Building a simple offline-capable
Notepad app using ServiceWorker

MY TINY
Solution YOUTUBE
CHANNEL ⟶
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, More in "JavaScript"

https://www.amitmerchant.com/Handling-Time-Intervals-In-Javascript/ 1/4
10/29/21, 10:56 AM Handling time intervals in JavaScript – Amit Merchant – A blog on PHP, JavaScript, and more

var pomodoroIntervalId;
Prevent object extension
— Object.freeze() vs
Object.seal() vs
function startTimer(duration, display) {
Object.preventExtensions()
timer = duration;

Abort a fetch request

pomodoroIntervalId = setInterval(function(){
manually in JavaScript
if (--timer < 0) {

RegEx simplified with

timer = duration;

named capture groups in

}
JavaScript

console.trace — A better
minutes = parseInt(timer/60, 10);

alternative to console.log
seconds = parseInt(timer%60, 10);

Filter certain values from

the output of
minutes = minutes < 10 ? '0'+minutes : minutes;
JSON.parse() method
seconds = seconds < 10 ? '0'+seconds : seconds;

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

Recently Published

Render Images Based On

if(minutes == 0 && seconds == 0){
Dark or Light Theme Of
The Device
NEW
notifyUser();

}
How vscode.dev
}, 1000);
Interacts With User's
Local Filesystem?
}

Gradient-y Box Shadows

in CSS
And then utilize the same startTimer() across other timers by
Make any string studly
first clearing the current time interval using clearInterval() method
case using Str::headline()
passing the interval ID. In our case I’ve assigned it to a global in Laravel 8.x

variable pomodoroIntervalId . This basically clears the currently Track Git-style local
running time interval, so that it can be utilized next time another changes in Chrome Dev
Tools
timer has been set. The code would look like below…

function resetTimer() {
Top Categories

clearInterval(pomodoroIntervalId);

Laravel
PHP
}

JavaScript

Miscellaneous

React
CSS

https://www.amitmerchant.com/Handling-Time-Intervals-In-Javascript/ 2/4
10/29/21, 10:56 AM Handling time intervals in JavaScript – Amit Merchant – A blog on PHP, JavaScript, and more

This gives us the benefit of using the same setInterval() Jekyll

Git

function across fidderent use cases which makes the code clean VS Code
➔

and sleek. And I think it’s a really handy feature of JavasScript.

» Share: Twitter, Facebook,

Hacker News

Beep! Beep! I'm also running a YouTube channel which I hope you're
going to love!

👋 Hi there! I'm Amit. I write articles

about all things web development. If
you like what I write and want me to
continue doing the same, I would like
you buy me some coffees. I'd highly
appreciate that. Cheers!

Buy me a coffee

Join my newsletter

Comments?

0 Comments
- powered by
utteranc.es

Write Preview

Sign in to comment

Styling with Markdown is supported
Sign in with GitHub

Browse articles by category

https://www.amitmerchant.com/Handling-Time-Intervals-In-Javascript/ 3/4
10/29/21, 10:56 AM Handling time intervals in JavaScript – Amit Merchant – A blog on PHP, JavaScript, and more
Browse articles by category
More on similar topics

Prevent object extension — Object.freeze() vs Object.seal()

vs Object.preventExtensions()

Abort a fetch request manually in JavaScript

RegEx simplified with named capture groups in JavaScript

console.trace — A better alternative to console.log

About
Contact
Categories
Guestbook

Copyright © 2021 — Amit Merchant

https://www.amitmerchant.com/Handling-Time-Intervals-In-Javascript/ 4/4