jQuery清空標籤內容--防止記憶體洩露
阿新 • • 發佈:2018-11-04
寫jQuery程式碼是,經常會做清空一個標籤內容的操作。那麼你是怎麼做的呢?比如
<div id="box"> <p>星期一</p> <p>星期二</p> <p>星期三</p> <p>星期四</p> <p>星期五</p> <p>星期六</p> <p>星期天</p> </div>
我們要清除掉box中的所有元素。
你可能會好不猶豫的寫下程式碼:
$('#box').html('');
首先必須承認,這麼寫能實現清空box的效果。
但是,這麼寫不好。因為這麼寫有可能會引起記憶體洩露。
何謂記憶體洩露?就是你的程式由於某種原因,佔用了過多的記憶體空間,並且,在你不需要使用這些記憶體空間之後,仍然無法釋放掉這些記憶體空間;當你由此佔用的空間越來越多,達到一定程度後,就有可能引起程式崩潰;此所謂記憶體洩露。
那問題來了,這個$obj.html('')方法為啥會引起記憶體洩露?(ps:這裡的$obj表示一個jQuery物件)
$obj.html('')只清空該物件的內部元素,但是不會清楚註冊在內部元素上的事件。
比如上例中,如果div#box裡的p標籤上還註冊有事件,那麼這些事件程式碼當然要佔用記憶體。如果你使用$('#box').html('')來清空所有的p,那麼box的內容確實被清空了,但是註冊在這些p標籤上的事件程式碼並沒有被清理掉,這些事件程式碼仍然保留在記憶體裡,並且無法得到釋放。
解決之道:使用empty()
$('#box').empty();
empty()會清空一切,包括那些被清理掉的元素身上註冊的事件,這樣就防止發生記憶體洩露。
ps:你可能會說,現在記憶體動不動都4G,8G,你要是因為這卡了,是你電腦太爛。你非要這麼說,我也無話可說。不過話說回來了,有更好的,正確的,為啥不用呢?勿以善小而不為嘛