我不太了解 setTimeout 和 javascript 中的线程答案

【问题标题】：I don't quite understand setTimeout and threading in javascript我不太了解 setTimeout 和 javascript 中的线程
【发布时间】：2013-06-14 10:10:06
【问题描述】：

我在Events and timing in-depth找到了一篇文章，这篇文章中有一个例子：

function run() {
  var div = document.getElementsByTagName('div')[0]
  for(var i=0xA00000;i<0xFFFFFF;i++) {
    div.style.backgroundColor = '#'+i.toString(16)
  }
}

上面写着：

在大多数浏览器中，在脚本完成之前，您什么都看不到，或者直到浏览器暂停它并显示“脚本也在运行”的消息长”。

这意味着在执行这些代码时我看不到动画。

但是为什么呢？这个我不太明白，是不是代码执行太快了？还是执行代码后渲染工作完成？

为什么添加setTimeout 可以显示动画？

【问题讨论】：

Why is setTimeout(fn, 0) sometimes useful?的可能重复
脚本执行和执行流程不谈，您可以通过询问更改元素的大小和颜色来触发重绘。我猜它会强制浏览器在继续之前重新绘制。

标签： javascript animation settimeout

【解决方案1】：

当run() 函数正在执行时，浏览器不会更新页面。它一直等到函数完成执行。但是对于setTimeout，它会以增量方式运行 - 浏览器会在每次运行后/之后更新页面。

您问题中链接的摘要很好地解释了它：

大多数浏览器对 UI 和 JavaScript 使用单线程，即被同步调用阻塞。因此，JavaScript 执行会阻止渲染。

事件是异步处理的，DOM 事件除外。

setTimeout(..,0) 技巧非常有用。它允许：

让浏览器呈现当前的变化。躲避“脚本正在运行” 太长”的警告。更改执行流程。歌剧在许多方面都很特别涉及超时和线程的地方。

【讨论】：