使用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'); 

我覺得這可能會幫助你。