为什么我的页面会同时呈现？

Question

我的理解是事件循环会变得有点复杂。我对 JavaScript 和整个网络还很陌生，所以对我来说更复杂。但是，我使用网格布局在屏幕上制作了一个网格。我只想用红色填充每个框，但我希望看到这种填充发生。相反发生的是循环被计算，然后所有东西都被同时渲染。我怎样才能让它看起来像某种动画？也许指向一些资源，这样我就可以读到这个？我搜索了事件循环、循环和渲染，但发现了太多信息。提前致谢！

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

这是我的代码。如您所见，我什至设置了一个 setTimeout，这样我就可以一个一个地渲染。

Answer 1

您的代码没有按照您的预期执行。您期望您的代码运行，等待 2 秒，重复 99 次。

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

相反，您的代码在等待 2 秒后将自己排队运行 100 次。

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

一个解决方案是运行你的更新元素函数，并在执行结束时，在 2 秒后再次排队到运行。一旦它修改了所有 100 个元素，不再将自己设置为运行。

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

为什么我的页面会同时呈现？

Why does my page get rendered all at once?

javascript

browser