how to check if the event is running-CodePudding

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 ></i></ion-icon>Reset
      </button>
  <button id="start-btn"><i ></i></ion-icon>Start</button>
  <button id="pause-btn"><i ></i></ion-icon>Pause</button>
</div>

CodePudding user response：

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 ></i>Start/resume</button>
    <button id="pause-btn"><i ></i>Pause</button>
  </div>
</body>

CodePudding user response：

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