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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
微信小程序页面渲染实现方法
Nov 06 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
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP 读取和编写 XML
2014/11/19 PHP
Yii分页用法实例详解
2014/12/04 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
对pandas中to_dict的用法详解
2018/06/05 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
自我鉴定范文200字
2013/10/02 职场文书
环境工程求职简历的自我评价范文
2013/10/24 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
法制宣传月活动总结
2014/04/29 职场文书
北京颐和园导游词
2015/01/30 职场文书
医院病假条范文
2015/08/17 职场文书
党员心得体会范文2016
2016/01/23 职场文书
导游词之江西赣州
2019/10/15 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
如何利用React实现图片识别App
2022/02/18 Javascript
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android