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 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
vue地区选择组件教程详解
May 04 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
python自动生成model文件过程详解
2019/11/02 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
浅析Python迭代器的高级用法
2020/07/16 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
绩效考核实施方案
2014/03/18 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS