Why does my page get rendered all at once?-CodePudding

My understanding is that the event loop can get a bit complicated. I'm fairly new to JavaScript and the web in general so it's even more complicated for me. However, I have a made a grid on the screen using grid layout. All I wanted to do was to fill each box with red color but I'd like to see this filling happen. What happens instead is that the loop is being computed and then everything gets rendered at the same time. How can I manage to make it look like an animation of some sort? Maybe point towards some resource so I can read about this? I searched for event loop, loops and renders but found way too much information. Any help thanks in advance!

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 );
}

There's my code. As you can see I even put a setTimeout so I can render one by one.

CodePudding user response：

Your code doesn't do what you expect it to do. You are expecting your code to run, wait 2-seconds, then run again 100 times.

for 1 to 100
 update one element to be red
 wait 2 seconds

Instead you have effectively enqueued 100 functions to run sequentially after ~2 seconds.

wait 2 seconds
for 1 to 100
 update one element to be red

A solution would to run your function, and in that function, set itself to run after 2 seconds. Once it's modified all 100 elements, no longer set itself to run again.

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);