Javascript 使用jQuery切换类时，CSS样式不会立即应用

当一些javascript在后台运行时，我试图更改元素的样式，以指示页面“忙”或“加载”。我一直试图通过在JS脚本开始时使用jQuery的

.toggleClass（）

切换一个类来实现这一点，并在最后使用附加到该类的一些合适的CSS样式将其关闭

尽管该类会立即切换，但附加到该类的CSS样式直到JS完成执行后才会应用。因此，如果同时打开和关闭该类，则用户看不到样式的任何更改

下面我提供了一个简单的例子。在执行其余的JS代码之前，如何强制立即应用CSS样式中的更改

$（函数（）{
$（“#框”）。单击（函数（）{
//打开“红色”类。
$（this.toggleClass（'red'）；
//做一些需要时间的事情。
对于（i=0；i<10000；i++）{
控制台日志（i）；
}
//关闭类“红色”。
$（this.toggleClass（'red'）；
});
});
.wrapper{
利润率：15px；
文本对齐：居中；
颜色：#000；
}
#盒子{
利润率：15px0；
宽度：100px；
高度：100px；
线高：100px；
光标：指针；
背景：#ccc；
边框：实心3px#ccc；
-webkit转换：所有.3s线性0；
转换：所有.3s线性0；
}
#红色盒子{
背景#f43059；
}

点击我。
问题在于，您的“需要时间的东西”是同步的和阻塞的-当它运行时，浏览器重新绘制将被禁用

一个选项是侦听
transitionend
事件，以确保在资源密集型操作运行之前完成红色动画

为了使
.red
的删除也能正确地设置动画，您可以在繁重的操作完成后立即设置
setTimeout
。请注意，如果使用
addClass
和
removeClass
而不是
toggleClass
，代码会更清晰一些：


$（'#框'）。单击（函数（）{
$（this.one（'transitionend'，（）=>{
//做一些需要时间的事情。
对于（i=0；i<1000；i++）{
控制台日志（i）；
}
//关闭类“红色”。
设置超时（（）=>{
$（this.removeClass（'red'）；
});
});
$（this.addClass（'red'）；
});
.wrapper{
利润率：15px；
文本对齐：居中；
颜色：#000；
}
#盒子{
利润率：15px0；
宽度：100px；
高度：100px；
线高：100px；
光标：指针；
背景：#ccc；
边框：实心3px#ccc；
-webkit转换：所有.3s线性0；
转换：所有.3s线性0；
}
#红色盒子{
背景#f43059；
}

点击我。