jQuery清空标签内容--防止内存泄露

Posted 2021-01-17 ldq678

　　写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，你要是因为这卡了，是你电脑太烂。你非要这么说，我也无话可说。不过话说回来了，有更好的，正确的，为啥不用呢？勿以善小而不为嘛