Probando cosas en Javascript me he encontrado con la siguiente duda. Supongamos que tengo un botón que inicia una cuenta atrás. Al llegar a 0 la cuenta se termina. Partiendo de un html super sencillo solo con el objetivo de hacer el test:
<button>TEST</button>
<p>5</p>
He credo un script donde uso la función setInterval de la siguiente manera:
const btn = document.querySelector('button');
const counter = document.querySelector('p');
btn.addEventListener('click', () => {
clearInterval(time);
counter.innerHTML = 5;
const time = setInterval(() => {
counter.innerHTML--;
if (counter.innerHTML == 0) {
clearInterval(time);
}
}, 1000)
})
Esto funciona a medias. Si pulso botón y dejo que llegue a 0 el contador, todo perfecto. El problema surge cuando vuelvo pulsar el botón de TEST sin que el contador llegue a 0. Al no haber llegado a 0, no se ha ejecutado la funciona clearInterval y el contador no funciona correctamente.
Esto lo resuelvo poniendo la variable time que guarda el setInterval como variable global:
const btn = document.querySelector('button');
const counter = document.querySelector('p');
var time = "";
btn.addEventListener('click', () => {
clearInterval(time);
counter.innerHTML = 5;
time = setInterval(() => {
counter.innerHTML--;
if (counter.innerHTML == 0) {
clearInterval(time);
}
}, 1000)
})
Es una solución valida. La duda que me surge es.¿Se podría para el setInterval de alguna otra manera y evitar definir una variable global?
Simplemente es una duda que me surge. Gracias.