我有一些处理过程需要几秒钟的时间,所以我想在处理过程中添加一个可视化指示器。浏览器渲染和javascript执行的同步/异步性质
.processing
{
background-color: #ff0000;
}
<div id="mydiv">
Processing
</div>
脚本:
$("#mydiv").addClass("processing");
// Do some long running processing
$("#mydiv").removeClass("processing");
我天真地以为类将应用于div和用户界面将被更新。但是,在浏览器中运行(至少在Firefox中),div永远不会突出显示。有人可以向我解释为什么我的div不会突出显示吗?该类被添加,处理发生,然后该类被删除;用户界面不会在两者之间更新,用户也不会看到红色背景。
我知道JS是单线程的,但我总是推测浏览器呈现将在DOM更新时同步运行。我的假设是否不正确?
更重要的是,达到这种效果的推荐方法是什么?我是否必须使用setTimeout
来使缓慢处理异步并使用回调工作?必须有更好的方法,因为我在这里确实不需要异步行为;我只想要刷新UI。
编辑:
的jsfiddle:http://jsfiddle.net/SE8wD/5/
(请注意,你可能需要调整循环迭代的次数,给你自己的电脑上合理的延迟)
我相信这样的改变会直接导致DOM,但浏览器会等待,直到JavaScript执行“空闲”,然后再进行重新绘制。 – pimvdb 2012-03-23 10:58:48
“做一些长时间运行的处理”有一些异步调用? (ajax,settimeout等) – 2012-03-23 11:00:31
我不能真正看到你的代码出错了,因为它看起来很好,你已经发布。也许在你的外部css文件中有一些'!important'。你确定增加了班级(你是否通过萤火虫检查过),这个过程真的需要很长时间吗?可能它发生得太快 – 2012-03-23 11:00:44