Pregunta de un estudiante de JS.
Estoy haciendo una cuenta regresiva de 10 a 0 para este proyecto tipo juego. Sin embargo, la cuenta regresiva comienza sin un evento de clic. Quiero que comience como detector de eventos, pero no sé cómo detener la ejecución de esta función.
<div class="display-buttons-container"> <div class="display">10</div> <button id="arm">Arm</button> <button id="disarm">Disarm</button> </div> const btnArm = document.querySelector("#arm"); const btnDisarm = document.querySelector("#disarm"); const countdown = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]; const countdownDisplay = document.querySelector(".display"); let i = 0; btnArm.addEventListener("click", countdownFunction()); function countdownFunction() { countdownDisplay.innerHTML = countdown[i]; ++i; if (i > 10) countdownDisplay.innerHTML = 0; } setInterval(countdownFunction, 1000);Debe eliminar los paréntesis después de countdownFunction para evitar que ejecute la función inmediatamente.
Debe guardar el ID de intervalo devuelto por setInterval
puede llamar a clearInterval y pasar la identificación del intervalo como parámetro y detendrá el intervalo
const btnArm = document.querySelector("#arm"); const btnDisarm = document.querySelector("#disarm"); const countdown = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]; const countdownDisplay = document.querySelector(".display"); let i = 0; let intervalId function countdownFunction() { countdownDisplay.innerHTML = countdown[i]; ++i; if (i > 10) countdownDisplay.innerHTML = 0; } btnArm.addEventListener("click", () => { if (intervalId) return intervalId = setInterval(countdownFunction, 1000) }); btnDisarm.addEventListener("click", () => clearInterval(intervalId)) <div class="display-buttons-container"> <div class="display">10</div> <button id="arm">Arm</button> <button id="disarm">Disarm</button> </div>Aquí setInterval no está dentro de la función countdownFunction , esa es la razón por la que se ejecuta sin ningún evento de clic.
y para detener el temporizador puede usar clearInterval(intervalID) que se usa para borrar un temporizador que se establece con el método setInterval() .
const btnArm = document.querySelector("#arm"); const btnDisarm = document.querySelector("#disarm"); // no need of this array you can use a single variable instead // const countdown = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]; let count = 10; let intervalID; const countdownDisplay = document.querySelector(".display"); function startTimer() { count = 10; // clearing timer in case user wants to restart the timer if (intervalID) { clearInterval(intervalID); // clearing timer intervalID = undefined; // resetting intervalID } // intervalID will be used to clear the timer intervalID = setInterval(() => { if (count === 0 && intervalID) { clearInterval(intervalID); // clearing timer intervalID = undefined; // resetting intervalID } countdownDisplay.innerHTML = count; --count; }, 1000); } function stopTimer() { // clearing timer if intervalID is defined ie if any timer is in running state. if (intervalID) { clearInterval(intervalID); // clearing timer intervalID = undefined; // resetting intervalID } } <div class="display-buttons-container"> <div class="display">10</div> <button id="arm" onclick="startTimer()">Arm</button> <button id="disarm" onclick="stopTimer()">Disarm</button> </div>Generalmente prefiero setTimeout para este tipo de operación. Dicho esto, la clave para esto es declarar una variable que pueda contener el temporizador que ambas funciones de armar/desarmar pueden usar para configurar el temporizador o borrar el temporizador, respectivamente.
btnArm.addEventListener("click", countdownFunction()); asigna el valor devuelto de llamar a la función al oyente. A menos que esté devolviendo una función, no desea hacer esto. btnArm.addEventListener("click", countdownFunction); asigna una referencia a la función en su lugar.
He hecho que todos los elementos sean identificables por clase para mantener la coherencia.
Se agregó una nueva función que borra el temporizador.
Se eliminó el requisito de una matriz: solo puede establecer un valor predeterminado para el recuento actual.
Usó textContent en lugar de innerHTML .
// Cache the elements const arm = document.querySelector('.arm'); const disarm = document.querySelector('.disarm'); const display = document.querySelector('.display'); // Set up the listeners arm.addEventListener('click', start); disarm.addEventListener('click', stop); // Declare the timer variable let timer; function start() { // When `start` is called it immediately calls // `loop` with default count of 10 function loop(count = 10) { // If count > 0 display the count, and call loop // again with a reduced count if (count > 0) { display.textContent = count; timer = setTimeout(loop, 1000, --count); // Otherwise "Boom!" } else { display.textContent = '💥 Boom! 💥'; } } // Call the loop for the first time loop(); } // If "disarm" is called clear the timer function stop() { clearTimeout(timer); display.textContent = 'Disarmed'; } button { font-size: 1.2rem; padding: 0.4em 0.8em; border: 1px solid #dfdfdf; border-radius: 5px; margin: 0.5em 0.25em; } button:hover { cursor: pointer; border: 1px solid #454545; } .arm { background-color: salmon; } .disarm { background-color: lightgreen; } .display { margin: 1em 0.25em; font-size: 1.6rem; } <button class="arm">Arm</button> <button class="disarm">Disarm</button> <div class="display"></div>