Quiero crear una aplicación simple de eggtimer. Creé un temporizador y dos botones de inicio y pausa. Sin embargo, como soy principiante, no puedo trabajarlos bien. Cuando presiono el botón de inicio, el reloj está funcionando, pero si presiono el botón de inicio nuevamente, setInterval se activa nuevamente (lo cual no quiero). Por lo tanto, usé {once: true} con el detector de eventos. Pero, en consecuencia, cuando uso el botón de pausa, no puedo reanudar el reloj. Sé que debo almacenar el evento en un valor booleano, pero no sé cómo hacerlo correctamente. ¿Me puedes ayudar? Sé que la clave es configurar la variable clockIsRunning de la manera correcta. ¿Pero cómo?
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>if...else toma una condición, el código se ejecuta si el booleano es true , no si es false .
Sabiendo setInterval devuelve un número entero ( true ) y clearInterval devuelve undefined ( false ), puede tener fácilmente un estado de reloj asignándolo directamente al interval , gracias a @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>Tienes algunos problemas aquí. Su declaración if en su función startCountdown asigna false a clockIsRunning , por lo que siempre devolverá false. Lo que debe hacer es verificar la igualdad, es decir, usar == .
Luego, si el reloj no está funcionando, haga que la función startCountdown establezca la variable en verdadero; esto no debe hacerse en la función updateCountdown , ya que se ejecuta durante el intervalo (es decir, después de un segundo) y, por lo tanto, podría permitir que se establezcan múltiples intervalos si se hace clic en el botón Inicio varias veces antes de que transcurra el primer intervalo.
Además, en su detector de eventos para el botón de pausa, establezca clockIsRunning en falso. Su código sería algo como esto:
// 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); });