使用jquery addClass和removeClass时，浏览器的重绘非常慢

Question

我有一个页面，我需要动态添加或css类。我的页面中有以下Jquery代码，

myElementsList.addClass('AClass').removeClass('BClass')

这些css类将改变元素的颜色和背景颜色。问题是重新启动浏览器需要2到3秒。

如果我使用的css类没有eXist（或者没有重新绘制浏览器），那么它将很快执行。

myElementsList.addClass('NotEXistClassA').removeClass('NotEXistClassB')

欢迎任何建议？

修改：

我通过先改变前20行并使用计时器更改剩余部分来解决此问题的方法。如果在计时器过期之前再次引发事件，我也会每次重置此计时器。

欢迎任何其他建议。

Answer 1

这里的问题是你试图让浏览器同时做两件事，这两件事都要求它重新绘制相同的东西。

但实际上你只需要执行两个动作中的一个就可以达到你想要做的（改变行的颜色）。

您需要进行的基本更改不是为“未选择”设置样式，而为“已选择”设置另一种样式，而是为“默认”设置一个样式，为“选定”设置一个。

然后你可以使用“默认”样式来设置标准颜色，只需添加“选定”样式来覆盖它;您不需要删除默认样式，因为所选样式将覆盖它。

这是一个简单的CSS来帮助你入门：

.grid tr {
    background: #FFFFFF;  /*default white background*/
}

.grid tr.selected {
    background: #222222;
}

...当您选择脚本时，脚本只会addClass('selected')，而当您取消选择时，脚本会removeClass('selected')。

根本不需要not-selected课程。

当您切换选择时，这个简单的更改将删除您的程序正在完成的工作的一半，并且事实上它很可能会将其加速50％以上，因为它不需要多次重复涂上相同的元素。

这肯定会让你走得更快。关于为什么你的页面很慢，这不是全部的故事，但它肯定会有很大的帮助。

Answer 2

首先删除类然后分配新类

myElementsList.removeClass('BClass').addClass('AClass');

我认为这可能对你有所帮助。