Javascript 为什么DOM元素只在事件侦听器完成后更新？（纯js）

我正在用javascript编写一个程序，它将在延迟一段时间后更改元素的css样式（在本例中为背景色），类似于红绿灯

问题是：当您单击按钮时，按钮的onclick侦听器函数被输入。函数中用于循环遍历每个单元格并更改其颜色。通过循环的每一次都应该更新一个单元格的颜色，，但不更新。实际上，在按钮的onclick侦听器函数完成后，所有单元格都会更新

下面是我提出的问题的一个简短版本的链接

let main=document.getElementById（'main'））
//创建仅为空div的“单元格”（参考上面的css样式）
let cells=[]
for（设x=0，numCells=15；x

.main{
显示器：flex；
}
.细胞{
宽度：20px；
高度：20px；
边框：1px纯黑；
保证金：1px；
}

---

您的

睡眠功能就是问题所在。它半永久性地运行一个阻塞循环。当前选项卡（或框架）的所有资源都将用于解析该循环，以便一旦完成，事件循环可以继续并开始渲染。但是如果嵌套循环（和事件侦听器）在10秒后才解析，浏览器甚至在10秒后才能开始更新显示

等待一个使用
setTimeout
替代的承诺-
setTimeout
不会阻止处理或渲染，这与经过数万次迭代的循环不同：


const sleep=ms=>newpromise（res=>setTimeout（res，ms））；
常量main=document.getElementById（'main'）
常量单元格=[]
for（设x=0，numCells=20；x

.main{
显示器：flex；
}
.细胞{
宽度：20px；
高度：20px；
边框：1px纯黑；
保证金：1px；
}
某些性能的响应速度比我快，而我则以相同的响应速度工作

我只是对代码做了一些改进，

我也相信最好是先睡觉再上色


const main=document.getElementById（'main'））
，单元格=[]
，numCells=16
，run=document.createElement（'按钮'）
，sleep=ms=>newpromise（res=>setTimeout（res，ms））
;
设InOut=0//以反转颜色顺序
;
run.textContent='设置颜色'
;
for（设x=0；x
{
for（单元格中的单元格）
{cell.style.backgroundColor=null}
for（让x在单元格中）
{
等待睡眠（200）
单元格[x].style.backgroundColor=`hsl（${（Math.abs（InOut-x））*（360/numCells）}，100%，50%）`
}
InOut=InOut？0：（numCells-1）
}
#主{
显示器：flex；
}
#主要部门{
显示：内联块；
宽度：1.2米；
高度：1.2米；
边框：1px纯黑；
边缘：.1米；
背景色：白色；
}
#主按钮{
左边距：.3em
}