在Javascript（jQuery）完成之前更新CSS

我一直在阅读javascript的单线程特性，以及在代码完成之前UI是如何不更新的（例如）。对这个问题的回答主要解释了代码是如何执行的，但除了一些“黑客”计时器之外，没有提供真正可行的解决方案

我想知道是否有一个好的解决方案，其中可能包括承诺，或者

.then（）

功能，可以在javascript执行之前“绘制”UI

以下是一个具体示例：。在本例中，我希望“更改颜色”在运行计算之前立即更改

警告：我的示例包括一个10亿次迭代的for循环（在我的机器上花费了<2秒），可能会使您的计算机冻结一段时间

任何帮助都将不胜感激。

一些更改

• 在“逻辑”周围添加了一个

  setTimeout

  ，以便DOM有机会重新绘制
• 分解

  then（makeCalculations（））

  行，因为#1

  updateClass（）

  不返回承诺，#2

  then（methodCall（））

  将立即执行methodCall，因为您将

  （）

  放在它的末尾

函数updateClass（元素，新类）{
元素addClass（newClass）；
返回true；
};
函数makeCalculations（）{
$（“p”）.text（“正在运行…”）；
setTimeout（函数（）{
var x=0；
对于（变量i=0；i<100000000；i++）{
x+=i；
}
$（“p”）.html（“完成！”+”
“+”x=“+x）；
}, 10);
}
$（函数（）{
$（“按钮”）。单击（函数（）{
updateClass（$（“span”），“紫色”）；
进行计算（）；
});
});
.purple{
颜色：紫色；
}

变色


点击我
单击按钮进行一些更改


在“逻辑”周围添加了一个
setTimeout
，以便DOM有机会重新绘制
分解
then（makeCalculations（））
行，因为#1
updateClass（）
不返回承诺，#2
then（methodCall（））
将立即执行methodCall，因为您将
（）
放在它的末尾


函数updateClass（元素，新类）{
元素addClass（newClass）；
返回true；
};
函数makeCalculations（）{
$（“p”）.text（“正在运行…”）；
setTimeout（函数（）{
var x=0；
对于（变量i=0；i<100000000；i++）{
x+=i；
}
$（“p”）.html（“完成！”+”
“+”x=“+x）；
}, 10);
}
$（函数（）{
$（“按钮”）。单击（函数（）{
updateClass（$（“span”），“紫色”）；
进行计算（）；
});
});
.purple{
颜色：紫色；
}

变色


点击我
单击按钮
是我发现这个问题不清楚吗？@treyBake-你试过这个例子吗？我的要求应该很明显。我确实。。。。这根本没有意义|编辑：等等，你是在问，在计算开始之前应该先改变颜色吗？@treyBake-是的。颜色应立即改变，然后运行计算。这就是我在最初的问题中所写的。你可以通过将你的逻辑放入一个具有低超时阈值的setTimeout中，让dom有机会进行更新。是我发现这个问题不清楚吗？@treyBake-你尝试过这个例子吗？我的要求应该很明显。我确实。。。。这根本没有意义|编辑：等等，你是在问，在计算开始之前应该先改变颜色吗？@treyBake-是的。颜色应立即改变，然后运行计算。这就是我在最初的问题中写的。你可以通过将你的逻辑放在一个低超时阈值的setTimeout中，让dom有机会更新。谢谢你把这些放在一起，非常感谢。谢谢你把这些放在一起，非常感谢。