Estoy tratando de cambiar el color de fondo de div uno por uno con un intervalo de 1 segundo pero mi código cambia el color de todos los div después de 1 segundo
HTML:
<div class="container"> <div class="bar" id="bar-1"></div> <div class="bar" id="bar-2"></div> . . <div class="bar" id="bar-100"></div> </div>JavaScript:
for (let i = 1; i <= 100; i++) { let elem = document.getElementById('bar-' + i); setTimeout(function() { elem.style.backgroundColor = 'blue'; }, 1000); }Está comenzando todos los tiempos de espera al mismo tiempo, por lo que todos terminan 1 segundo más tarde.
Necesita usar diferentes tiempos de espera para cada elemento. Multiplique el tiempo de espera por el índice.
for (let i = 1; i <= 3; i++) { let elem = document.getElementById('bar-' + i); setTimeout(function() { elem.style.backgroundColor = 'blue'; }, 1000 * i); } <div class="container"> <div class="bar" id="bar-1">1</div> <div class="bar" id="bar-2">2</div> <div class="bar" id="bar-3">3</div> </div>Su código actual ejecuta todo elem.style.backgroundColor = 'blue'; líneas aproximadamente al mismo tiempo, ya que setTimeout no espera a que finalice la ejecución anterior antes de iniciar su temporizador.
El siguiente código debería lograr el resultado deseado:
let i = 1; const itv = setInterval(() => { if (i > 3) return clearInterval(itv); // change this number to be 100, 3 is for demo const elem = document.getElementById('bar-' + i); elem.style.backgroundColor = 'blue'; i++; }, 1000); <div class="container"> <div class="bar" id="bar-1">1</div> <div class="bar" id="bar-2">2</div> <div class="bar" id="bar-3">3</div> </div>