• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

124
Vistas
Cuenta regresiva que muestra elementos de una matriz. setInterval no causa un retraso. El último elemento se muestra instantáneamente.

Soy un principiante. Me gustaría crear una cuenta regresiva simple a partir de una matriz iniciada por un detector de eventos de botón. Quiero mostrar los elementos de la matriz después de un retraso en p class="countdownDisplay". Sin embargo, no funciona como yo quiero. No hay demora.

 <p class="countdownDisplay"></p> <button>Start</button>
 let countdown = ["5", "4", "3", "2", "1", "Time's up!"]; let btn = document.querySelector("button"); let countdownDisplay = document.querySelector(".countdownDisplay"); btn.addEventListener("click", countdownFunction); function countdownFunction() { for (let i = 0; i < countdown.length; i++) { countdownDisplay.innerText = countdown[i]; console.log(countdown[i]); } } setInterval(countdownFunction, 5000);
almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Si llama al ciclo for, agregará de 0 a 5 a la vez y su código no funcionará. Espero que el código comentado a continuación te ayude:

 let countdown = ["5", "4", "3", "2", "1", "Time's up!"]; let btn = document.querySelector("button"); let countdownDisplay = document.querySelector(".countdownDisplay"); //declaring interval outside the function because we need to stop it at the end of counting let interval const startInterval = () => { interval = setInterval(countdownFunction, 1000); } btn.addEventListener("click", startInterval); //declaring the innitial value (first position of the array) let i = 0 function countdownFunction() { countdownDisplay.innerText = countdown[i++]; //if i is the last element of the array, stop the counting if(i==countdown.length) clearTimeout(interval) }
almost 3 years ago · Juan Pablo Isaza Denunciar

0

Elimina el bucle "for" de countdownFunction() .

 let countdown = ["5", "4", "3", "2", "1", "Time's up!"]; let i= 0; function countdownFunction() { console.log(countdown[i]) ++i; } setInterval(countdownFunction, 5000);
almost 3 years ago · Juan Pablo Isaza Denunciar

0

Un poco tarde, pero aquí hay una solución con setTimeout. La ventaja de esta versión es que termina después de la cuenta regresiva y no continúa como con setInterval.

 const countdown = ["5", "4", "3", "2", "1", "Time's up!"]; const countdownDisplay = document.querySelector(".countdownDisplay"); const button = document.querySelector("button"); function countdownFunction(i) { let _i = i++; setTimeout(() => { console.log(countdown[_i]) countdownDisplay.innerText = countdown[_i]; }, 1000 * _i, countdown[_i]); } button.addEventListener("click", () => { for(let i = 0; i<countdown.length; i++) { countdownFunction(i) } });
 <p class="countdownDisplay">Click</p> <button>Start</button>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda