0

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.

2 respuestas 2

1

Hice esto por si te funciona.

<html>
    <body>
        <button id="btn">
            Test
        </button>
        <p id="cont">5</p>
    </body>
    <script>
        let btn = document.getElementById("btn");
        let cont = document.getElementById("cont");
        btn.onclick = ()=>{
            cont.innerHTML = 5;
            let time = setInterval(()=>{
                if(cont.innerHTML == 0 || time>1){
                    clearInterval(time);
                    time = 0;
                    return 0;
                }
                cont.innerHTML--;
            }, 1000);
        }
    </script>
</html>
0

Hasta donde tengo entendido es imposible pausarlo. Pero te ofresco una alternativa:

  • Calcula los milisegundos restantes y guardalos en una variable y luego llama a clearInterval.
  • Para reanudar el temporizador llamas a un setTimeout y le asignas los milisegundos que guardaste en la variable anterior.
  • Y por untimo, en el callback del setTimeout llamas al setInterval nuevamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.