how to check if the event is running

Question

I want to create a simple eggtimer app. I created a timer and two buttons start and pause. However, since I'm a beginnner, I cannot work them right. When I hit the start button, the clock is running but if I hit the start button again, the setInterval is triggered again (which I don't want). Therefore, I used {once : true} with the event listener. But consequently when I use the pause button, I cannot resume the clock. I know I should store the event in a boolean, but I don't know how to do it correctly. Can you help me? I know the key things is setting the variable clockIsRunning in the right way. But how?

const startingMinutes = 25; let time = startingMinutes * 60; const startBtn = document.querySelector("#start-btn"); const pauseBtn = document.querySelector("#pause-btn"); const resetBtn = document.querySelector("reset-btn"); let interval; let clockIsRunning = false; // start button startBtn.addEventListener("click", startCountdown, false); const countdownEl = document.querySelector("#countdown"); function updateCountdown() { const minutes = Math.floor(time / 60); let seconds = time % 60; seconds = seconds < 10 ? "0" + seconds : seconds; countdownEl.innerHTML = `${minutes}:${seconds}`; time--; clockIsRunning = true; } function startCountdown() { if ((clockIsRunning = false)) { interval = setInterval(updateCountdown, 1000); } } // pause button pauseBtn.addEventListener("click", function() { clearInterval(interval); });

<div id="display-container"> <div id="display-timer"> <p id="countdown">25:00</p> </div> <p id="display-logo">Focus</p> </div> <div id="buttons-container"> <button id="reset-btn"> <i class="fas fa-undo-alt"></i></ion-icon>Reset </button> <button id="start-btn"><i class="fas fa-play"></i></ion-icon>Start</button> <button id="pause-btn"><i class="fas fa-pause"></i></ion-icon>Pause</button> </div>

you could say let interval = null and do a null check in the start click handler to see if you should start it. Then you would just set interval back to null on reset — bturner1273
– bturner1273, Commented Dec 30, 2021 at 16:53
You have a typo if ((clockIsRunning = false)) { should be if ((!clockIsRunning)) { ... I also would move clockIsRunning into startCountDownfunction. — ZeroWorks
– ZeroWorks, Commented Dec 30, 2021 at 16:58
Yes I corrected it, so the clock is running and the event is not triggered again. It can be paused but it cannot be resumed by start. — TomDev
– TomDev, Commented Dec 30, 2021 at 17:02
also when you reset you should set the countdown paragraph text back to 25:00 — bturner1273
– bturner1273, Commented Dec 30, 2021 at 17:02

Leau · Accepted Answer · 2021-12-30 17:23:59Z

if...else take a condition, the code is executed if the boolean is true, not if false.

Knowing setInterval returns and integer (true) and clearInterval returns undefined (false), you can easily have a clock status by assign it to interval directly, thanks to @danh.

/* If clock is not running, start */ if(!interval) { interval = setInterval(updateCountdown, 1000); }

/* If clock is running, stop */ if(interval) { interval = clearInterval(interval); // undefined }

const startingMinutes = 25; let time = startingMinutes * 60; let interval; const startBtn = document.querySelector("#start-btn"); const pauseBtn = document.querySelector("#pause-btn"); startBtn.addEventListener("click", startCountdown, false); const countdownEl = document.querySelector("#countdown"); function updateCountdown() { const minutes = Math.floor(time / 60); let seconds = time % 60; seconds = seconds < 10 ? "0" + seconds : seconds; countdownEl.innerHTML = `${minutes}:${seconds}`; time--; } function startCountdown() { if(!interval) { updateCountdown(); interval = setInterval(updateCountdown, 1000); } } // pause button pauseBtn.addEventListener("click", function() { if(interval) { interval = clearInterval(interval); } });

<body> <div id="display-container"> <div id="display-timer"> <p id="countdown">25:00</p> </div> </div> <div id="buttons-container"> <button id="start-btn"><i class="fas fa-play"></i>Start/resume</button> <button id="pause-btn"><i class="fas fa-pause"></i>Pause</button> </div> </body>

Good, except you don't need the clockIsRunning boolean. The interval variable can keep state. Initialize it to null. Null it on pause or reset. Clock is running when it's not null.

Marion · Accepted Answer · 2021-12-30 17:05:22Z

You have a few problems here. Your if statement in your startCountdown function assigns false to clockIsRunning, and so will always return false. What you should do is check for equality, i.e. use ==.

Then, if the clock isn't running, have the startCountdown function set the variable to true; this should not be done in the updateCountdown function, since this is run during the interval (i.e. after a second) and so could allow multiple intervals to be set if the Start button is clicked multiple times before the first interval elapses.

Also, in your event listener for the pause button, set clockIsRunning to false. Your code would look something like this:

// interval handler function updateCountdown() { const minutes = Math.floor(time / 60); let seconds = time % 60; seconds = seconds < 10 ? "0" + seconds : seconds; countdownEl.innerHTML = `${minutes}:${seconds}`; time--; } // start button function startCountdown() { if ((clockIsRunning == false)) { clockIsRunning = true; interval = setInterval(updateCountdown, 1000); } } // pause button pauseBtn.addEventListener("click", function () { clockIsRunning = false; clearInterval(interval); });

As others have stated, you don't even need the clockIsRunning variable; you can instead check the state of interval directly (i.e. for null). But my answer addresses directly the question of how to properly use the clockIsRunning variable.

Collectives™ on Stack Overflow

how to check if the event is running

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related