jQuery清空标签内容--防止内存泄露
写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,你要是因为这卡了,是你电脑太烂。你非要这么说,我也无话可说。不过话说回来了,有更好的,正确的,为啥不用呢?勿以善小而不为嘛