1

我在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可以显示动画？

4

1 回答 1

1

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

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

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

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

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

让浏览器呈现当前更改。避开“脚本运行时间过长”警告。更改执行流程。在超时和线程方面，Opera 在很多地方都很特别。

于 2013-06-14T10:12:19.427 回答