How do I stop a setInterval timer in javaScript with an eventListener?

Question

I'm trying to make a pomodoro timer just like the one on this page TomatoTimer

The problem is that I don't know if I'm taking the best approach.

I created this function:

function setTimer(minutes = "25") {
  let duration = minutes * 60 * 1000;
  let seconds = "00";
  let countdown = document.getElementById("timer");

  seconds = parseInt(seconds);
  minutes = parseInt(minutes);

  setInterval(() => {
    if (seconds === 0 && minutes > 0) {
      seconds = 60;
      minutes = minutes - 1;
      countdown.innerText = `${minutes}:${seconds}`;
    }
    if (seconds != 0) {
      seconds = seconds - 1;
    }

    if (seconds.toString().length === 1 && minutes.toString().length === 1) {
      countdown.innerText = `0${minutes}:0${seconds}`;
    } else if (minutes.toString().length === 1) {
      countdown.innerText = `0${minutes}:${seconds}`;
    } else if (seconds.toString().length === 1) {
      countdown.innerText = `${minutes}:0${seconds}`;
    } else {
      countdown.innerText = `${minutes}:${seconds}`;
    }

    duration = duration - 10000;
  }, 1000);
}

The minutes and seconds are strings because I want the timer to have this format (01:05) and if I work with numbers the "00" is "printed" as "0". From the third "if" statement to the end I'm formatting the output so that part is not that important, you could ignore it if you want.

After declaring that function I added an event listener to a button in order to call it, so far so good.

The problem is that I don't have the slightest idea of how to stop the timer.

The only thing I want is to stop that function from executing, I don't want the app to remember what time it was and restart from there, I'll do that later.

I tried multiple things, one of them was to use the clearInterval method, but I saw that you must store the interval inside a variable and when I do that the I'm not able to call the function with my eventListener.

I have a couple of questions:

It would be better to create the interval outside the function?
Is "setInterval" the way to go?
Is it possible to stop the timer having the function I created?

If you want to have a better idea of what I'm making and what I've done so far, you can check all my code in codepen.

the return value of calling [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) is used as an argument to [clearInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) as documented in the links provided — Jaromanda X, Feb 12 '20 at 22:36

score 1 · Accepted Answer · answered Feb 12 '20 at 22:45

1

A good idea is to keep track of the remaining time of the Timer (until reaching 00:00), so when you pause the Timer you simply call clearInterval, and when you want to resume it, simply call again setInterval, but now using the remaining time as an imput.

And to solve your problem of keeping the reference to the interval, you may want to return it from your setTimer function. Just to keep your code tidy, I suggest you create a Timer class that manages all the "state" of your timer and also provides methods to interact with it (like pause(), stop(), resume(), reset()).

answered Feb 12 '20 at 22:45

vicentefuenzalida

91
7

Thank you Vichof, that's a really good idea. You've been really helpful. I'm still trying to discover how to stop the interval with my button, but I will make those changes in my code first and maybe it will be easier to find the solution. – nardoyala Feb 12 '20 at 22:57
I’m glad it’s useful :) If you build a Timer class, then you can creat an instance of it, and pass the `pause` method as the callback for the onClick event in your button – vicentefuenzalida Feb 12 '20 at 23:41
@BernardoAyala me das un ? :D – vicentefuenzalida Feb 13 '20 at 23:34

How do I stop a setInterval timer in javaScript with an eventListener?

1 Answers1