Digamos que tengo una cuadrícula html de 100 elementos de tramo y quiero cambiar gradualmente el color de estos tramos de tramo [0] a tramo [100]. Mi código a continuación cambia el color de los elementos de intervalo, pero todo de una vez, y luego nuevamente después de 3 segundos, pero no hace lo que busco. Idealmente, me gustaría que cambiara gradualmente los colores y luego, después de 3 segundos, comience a cambiarlos nuevamente mientras la primera función sigue cambiando hasta el final del intervalo [100]
var count = 1; var ancestor = document.getElementById('hello'); var descendents = ancestor.getElementsByTagName('span'); var myColors = ['rgb(146, 168, 209)', 'rgb(136, 176, 75)', 'rgb(247, 202, 201)']; var e, c; function myLoop(count) { setTimeout(function() { for (i = 0; i < descendents.length; ++i) { e = descendents[i]; c = e.style.color; //pick color e.style.color = myColors[Math.floor(Math.random() * myColors.length)]; } count++; if (count < descendents.length) { myLoop(count); } }, 3000); } myLoop(count);El siguiente código podría mejorar y mejorar la sintaxis para ser más pequeño, pero creo que eso es lo que está buscando. En este fragmento, creé solo 10 tramos y establecí el intervalo en 250 m solo para que sea más fácil de probar. Lo que hará es comenzar desde el intervalo 1 e ir hasta el 10 cambiando los colores al primero en la matriz myColors . Después de que termine, comenzará de nuevo desde el segundo color y así sucesivamente.
En su código, usó setTimeout , que se ejecutará una vez después de 3 segundos y luego no volverá a ejecutarse. Creo que estabas buscando setInterval , que creará un ciclo que se ejecuta cada X milisegundos.
const myColors = ['rgb(146, 168, 209)', 'rgb(136, 176, 75)', 'rgb(247, 202, 201)']; let index = 0; let loops = 0; function generateSpans(){ const ancestor = document.getElementById("ancestor"); for(let i = 0; i<10; i++){ const span = document.createElement("span"); span.innerText = i; ancestor.appendChild(span); } } function blinkElements(){ const elements = document.getElementsByTagName("span"); setInterval(function(){ if(index === elements.length){ index = 0; if(loops === myColors.length-1){ loops = 0; }else{ loops++; } } elements[index].style.backgroundColor = myColors[loops]; index++; }, 250); } document.addEventListener("DOMContentLoaded", function(event) { generateSpans(); blinkElements(); }); div { width: 1000px; height: 50px; } span { background-color: red; padding: 10px; margin: 10px; } <div id="ancestor"> </div>