1

estoy tratando de hacer una cuenta regresiva de 60s y cuando presiono el botón que se reinicie la cuenta. Lo logré pero a medias porque cuando presiono tiene un retardo de un segundo, no logro eliminar ese segundo de más que me queda.

Les dejo el código:

let inicio = 60,
               divSegundos = document.querySelector('#segundos'),
               divContador = document.querySelector('#div-contador'),
               boton = document.querySelector('#boton');

          (function countdown() {
               var count = setTimeout(countdown, 1000);

               if (inicio == 0) {
                    divSegundos.innerText = '0' + inicio;
                    clearTimeout(count);
               } else {
                    if (inicio < 10) {
                         divSegundos.innerText = '0' + inicio;
                    } else {
                         divSegundos.innerText = inicio;
                    }
               }
               inicio--;

               function resetCountdown() {
                    inicio = 60;
                    setTimeout(() => {
                         clearInterval(countdown);
                    });
               }

               boton.addEventListener('click', () => {
                    resetCountdown();
               });
          })();
<div id="div-contador">
          <div id="minutos">00</div>
          <span>:</span>
          <div id="segundos"></div>
     </div>
     <br>
     <button id="boton">Presionar</button>

Si hay alguna ayuda se agradece :)

1 respuesta 1

4

Intenta ejecutar la primera vez manualmente para ahorrar ese tiempo

let inicio = 60,
     divSegundos = document.querySelector('#segundos'),
     divContador = document.querySelector('#div-contador'),
     boton = document.querySelector('#boton');

(function() {
     var interval;
     
     function countdown(){
       if (inicio == 0) {
            divSegundos.innerText = '0' + inicio;
       } else {
            if (inicio < 10) {
                 divSegundos.innerText = '0' + inicio;
            } else {
                 divSegundos.innerText = inicio;
            }
       }
       inicio--;
     }
     
     function init(){
        interval = setInterval(countdown, 1000)
     }

     function resetCountdown() {
        inicio = 60;
        clearInterval(interval);
        countdown(); // ejecutar primera vez manual, para evitar esperar 1 seg
        init();
     }

     boton.addEventListener('click', () => {
          resetCountdown();
     });
     
     init()
})();
<div id="div-contador">
          <div id="minutos">00</div>
          <span>:</span>
          <div id="segundos"></div>
     </div>
     <br>
     <button id="boton">Presionar</button>

2
  • Funciona, gracias! Ahora tengo el problema del retardo de un segundo cuando actualizo :/
    – Sebaavt95
    Commented el 25 dic. 2019 a las 19:37
  • Genial! Si te ayudo, te pido marques la respuesta como aceptada, gracias Commented el 25 dic. 2019 a las 23:33

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.