Construir un temporizador de cuenta regresiva simple es fácil con los eventos de temporización nativos de JavaScript. Puede leer más sobre ellos en este artículo.
Construyendo el temporizador de cuenta regresiva
Comience declarando una función vacía llamada startCountdownque toma secondscomo argumento:
function startCountdown(seconds) { };Queremos realizar un seguimiento de los segundos que pasan una vez que se inicia el temporizador, así que use letpara declarar una variable llamada countery establecerla igual a seconds:
function startCountdown(seconds) { let counter = seconds; }Recuerde que es una buena práctica guardar su función de evento de tiempo en una variable. Esto hace que sea mucho más fácil detener el temporizador más tarde. Cree una variable llamada intervaly configúrela igual a setInterval():
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(); }Puede pasar una función directamente a setInterval, así que vamos a pasarle una función de flecha vacía como primer argumento. Además, queremos que la función se ejecute cada segundo, así que pase 1000 como segundo argumento:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { }, 1000); }Ahora la función a la que pasamos setIntervalse ejecutará cada segundo. Cada vez que se ejecuta, queremos registrar el valor actual de counteren la consola antes de disminuirlo:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; }, 1000); }Ahora, si ejecuta la función, verá que funciona, pero que no se detiene una vez counteres menor que 0:
startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // -1 // -2 Para solucionar esto, primero escriba una ifdeclaración que se ejecute cuando countersea menor que 0:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { } }, 1000); }Luego, dentro de la ifdeclaración, borre intervalcon clearIntervaly registre una cadena de sonido de alarma en la consola:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { clearInterval(interval); console.log('Ding!'); } }, 1000); }Ejecución
Ahora, cuando inicie el temporizador, debería ver lo siguiente:
startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // Ding!Más recursos
Eventos de tiempo de JavaScript: setTimeout y setInterval