¿Hay alguna manera de hacer que setInterval funcione solo una vez a la vez? Mi código debería funcionar de esta manera:
Si hace clic en "Hacer clic en mí" una vez, funcionará como se esperaba. Sin embargo, si hace clic en el botón varias veces lo suficientemente rápido, el oyente uniforme funcionará simultáneamente tantas veces como haya hecho clic.
let button = document.getElementById('button'); let input = document.getElementById('input'); let timer = document.getElementById('timer'); function timerRunner () { let startTime = input.value; if (startTime <= 0) { console.log('The number is <=0') } else { do { timer.textContent = startTime; let counter = startTime; let interval = setInterval(()=> { console.log(counter); counter--; timer.textContent = counter; if (counter === 0) { clearInterval(interval); } }, 1000); } while (typeof (timer.textContent) == "number"); } } button.addEventListener('click', timerRunner) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .centeralizer { display: block; width: 200px; margin: 20vh auto; } #input { display: block; margin-bottom: 35px; width: 150px; } #button { display: inline-block; margin-right: 35%; } #timer { display: inline-block; } </style> <script src="index.js" defer></script> </head> <body> <div class="centeralizer"> <input id="input" placeholder="Input the number" type="number"> <button id="button">Click me</button> <div id="timer">0</div> </div> </body> </html>Debe almacenar el intervalo de ejecución en el ámbito superior y borrarlo si se vuelve a pulsar el botón.
const button = document.getElementById('button'); const input = document.getElementById('input'); const timer = document.getElementById('timer'); let interval = null; function startTimer() { const startTime = +input.value; if (startTime <= 0) { console.log('The number is <= 0'); return; } let counter = startTime; timer.textContent = startTime; if (interval) clearInterval(interval); interval = setInterval(() => { timer.textContent = --counter; console.log(counter); if (counter === 0) clearInterval(interval); }, 1000); } button.addEventListener('click', startTimer)Puede agregar una variable booleana isRunning que rastrea si el temporizador se está ejecutando. Lo configura cuando el temporizador está funcionando y lo apaga cuando el temporizador termina. Compruebe si está encendido cuando se hace clic en el botón y regrese si lo está. Puede evitar que se activen varias instancias del temporizador.
let button = document.getElementById('button'); let input = document.getElementById('input'); let timer = document.getElementById('timer'); var isRunning = false; function timerRunner () { if(isRunning) { return; //return if timer is already running } isRunning = true; //specify that the timer is running let startTime = input.value; if (startTime <= 0) { console.log('The number is <=0') } else { do { timer.textContent = startTime; let counter = startTime; let interval = setInterval(()=> { console.log(counter); counter--; timer.textContent = counter; if (counter === 0) { isRunning = false; //specify that the timer is not running and can be run again clearInterval(interval); } }, 1000); } while (typeof (timer.textContent) == "number"); } } button.addEventListener('click', timerRunner)