javascript - 浏览器渲染和 javascript 执行的同步/异步特性

Question

我有一些处理需要几秒钟，所以我想在处理过程中添加一个视觉指示器。

.processing
{
  background-color: #ff0000;
}

<div id="mydiv">
  Processing
</div>

脚本:

$("#mydiv").addClass("processing");
// Do some long running processing
$("#mydiv").removeClass("processing");

我天真地以为类会应用到div上，UI会更新。但是，在浏览器(至少在 Firefox 中)运行它时，div 永远不会突出显示。有人可以向我解释为什么我的 div 永远不会突出显示吗？添加类，进行处理，然后删除类；用户界面不会在此期间更新，用户永远不会看到红色背景。

我知道 JS 是单线程的，但我一直假设浏览器渲染会在 DOM 更新时同步运行。我的假设不正确吗？

更重要的是，实现这种效果的推荐方法是什么？我是否必须使用 setTimeout 来使缓慢的处理异步并使用回调？必须有更好的方法，因为我真的不需要这里的异步行为；我只想刷新 UI。

编辑:

JSFiddle:http://jsfiddle.net/SE8wD/5/

(请注意，您可能需要调整循环迭代次数，以便在您自己的 PC 上获得合理的延迟)

Answer 1

您可能应该将处理放在一个单独的事件中，就像这样；

$("#mydiv").addClass("processing");
setTimeout(function(){
   // This runs as a seperate event after
   // Do some long running processing
   $("#mydiv").removeClass("processing");
},1);

这样浏览器应该使用processing重绘屏幕，而长时间运行的步骤将作为一个单独的事件启动，并在完成后删除处理消息。