JQuery Dialog的内存泄露问题解决方法


Posted in Javascript onJune 18, 2010

对于页面来说,JQuery中的Dialog从效果上来说还可以,而且使用简单,只要短短几行绑定的代码就可以实现弹出效果。
代码

$('#dialog').dialog({ 
autoOpen: false, 
width: 600, 
buttons: { 
"Ok": function() { 
$(this).dialog("close"); 
}, 
"Cancel": function() { 
$(this).dialog("close"); 
} 
} 
});

在一些JS交互性不多的一般页面来说,没有任何问题!但是对于交互性强的,需要动态加载与释放DOM的页面来说,它就是一个悲剧的东西!为什么这样说?大家看下下面的例子:

一段简单的代码,一个DIV是通过动态加载到页面上,然后对该DIV用Dialog进行绑定,以达到弹出的目的!下面的test元素就是<div id="test"></div>。
代码

function TestAppend() { 
$("#test").append('<div id="dialog"><div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" />' + 
'<a href="javascript:upload();">上传</a>' + 
'<a href="javascript:$(#uploadify).uploadifyClearQueue()">取消上传</a><div>'); 
$('#dialog').dialog({ 
autoOpen: false, 
width: 600, 
buttons: { 
"Ok": function() { 
$(this).dialog("close"); 
}, 
"Cancel": function() { 
$(this).dialog("close"); 
} 
} 
}); 
return false; 
}

接着,我需要删除该DOM元素,一般来说,正常的做法都是$("#test").empty();这行简单的代码就完成了!这样有效吗?!当执行完这样代码后,你再用$('#dialog')来获取dialog元素,郁闷的事情发生了,既然获取到了!为什么!不是已经empty了吗!

下面我们来看下这一悲剧是如何造成的,

我们把注意点放到$('#dialog').dialog上面,然后看看JQuery的实现代码是如何写的,当我们跟踪代码到dialog类中的_create方法的时候,问题的原因找到了,看下面这段代码:

uiDialog = (self.uiDialog = $('<div></div>')) 
.appendTo(document.body) 
.hide() 
.addClass(uiDialogClasses + options.dialogClass) 
.css({ 
zIndex: options.zIndex 
}) 
// setting tabIndex makes the div focusable 
// setting outline to 0 prevents a border on focus in Mozilla 
.attr('tabIndex', -1).css('outline', 0).keydown(function(event) { 
if (options.closeOnEscape && event.keyCode && 
event.keyCode === $.ui.keyCode.ESCAPE) { 
self.close(event); 
event.preventDefault(); 
} 
}) 
.attr({ 
role: 'dialog', 
'aria-labelledby': titleId 
}) 
.mousedown(function(event) { 
self.moveToTop(false, event); 
}),

它既然也动态创建一个div,而且把该div加到了Body上面,然后把dialog中的元素从<div id=test>中移除,加入到该新的div中.....

这就是为什么我们$("#test").empty()后,却对内部的dialog没有起作用了!而且这有一个最不好的一个地方,也是最容易出现内存泄露的地方:它动态的在Body中创建了一个div,这样如果窗体不关闭的话,而你又在不察觉的情况下不断的使用上面的TestAppend方法来动态加载DOM,就会创建N个这样的div!

其实这个问题郁闷的地方不是在如何解决,而且隐藏的很深,很难发现!那么发现之后解决起来就变的简单多了:

if ($('#dialog')[0]) { 
$('#dialog').parent().empty(); 
$('#dialog').parent().remove(); 
}

当前加上这段后代码后,再做$("#dialog")来测试下,期望的结果终于出现了!dialog元素消失了!
Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
jQuery 事件队列调整方法
Sep 18 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 #Javascript
jquery ready()的几种实现方法小结
Jun 18 #Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 #Javascript
JavaScript Chart 插件整理
Jun 18 #Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 #Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 #Javascript
js打印纸函数代码(递归)
Jun 18 #Javascript
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
javascript关于继承解析
2016/05/10 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
Python中itertools模块用法详解
2014/09/25 Python
详解Python自建logging模块
2018/01/29 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python3 线性回归验证方法
2019/07/09 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
数据库连接池的工作原理
2012/09/26 面试题
创业计划书——互联网商机
2014/01/12 职场文书
党员承诺书范文
2014/05/19 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
医院护士工作检讨书
2014/10/26 职场文书
开除通知书范本
2015/04/25 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python