Tengo entendido que el bucle de eventos puede complicarse un poco. Soy bastante nuevo en JavaScript y en la web en general, por lo que es aún más complicado para mí. Sin embargo, hice una cuadrícula en la pantalla usando el diseño de cuadrícula. Todo lo que quería hacer era llenar cada cuadro con color rojo, pero me gustaría ver este relleno. Lo que sucede en cambio es que el bucle se está calculando y luego todo se procesa al mismo tiempo. ¿Cómo puedo lograr que se vea como una animación de algún tipo? ¿Quizás apuntar hacia algún recurso para que pueda leer sobre esto? Busqué bucles de eventos, bucles y representaciones, pero encontré demasiada información. Cualquier ayuda gracias de antemano!
for(let i = 1; i < 100; i += 2){ setTimeout(() =>{ const squareElement = document.querySelector('.grid :nth-child('+i+')'); console.log('.grid:nth-child('+i+')'); squareElement.style.backgroundColor = 'red'; }, 2000 ); }Ahí está mi código. Como puede ver, incluso puse un setTimeout para poder renderizar uno por uno.
Tu código no hace lo que esperas que haga. Está esperando que su código se ejecute, espere 2 segundos, repita 99 veces.
for 1 to 100 update one element to be red wait 2 secondsEn cambio, su código se pone en cola para ejecutarse 100 veces, después de esperar 2 segundos.
wait 2 seconds for 1 to 100 update one element to be redUna solución sería ejecutar su función de elemento de actualización y, al final de la ejecución, hacer cola para ejecutarse nuevamente después de 2 segundos. Una vez que haya modificado los 100 elementos, ya no volverá a configurarse para ejecutarse.
function updateElement(i) { const squareElement = document.querySelector('.grid :nth-child('+i+')'); console.log('.grid:nth-child('+i+')'); squareElement.style.backgroundColor = 'red'; // if there are more elements to update, run again after 2 seconds. if(i < 100) { setTimeout(()=>updateElement(++i),2000); } } // start the function after 2 seconds. setTimeout(()=>updateElement(0),2000);