Ajax调用重新加载Div内存泄漏
Ajax Call to Reload Div Memory Leak
有什么建议可以让我的问题更好吗?
所以我有HTML和Javascript代码,从一个程序的DB中取出数据,用于实验室分析的统计分析。例如,你有一个电镀槽,比如说铜,你需要找出浓度,你取槽的pH值,然后把它插入程序,它就会保存这个信息。在网页上,它可以直观地显示已记录的内容,下一个添加的时间以及您必须进行更改的时间。
所以我想刷新页面,每三秒显示时间倒计时,直到下一个测试到期,我已经完成了下面的代码,但是有一个内存泄漏,正如你所看到的,我已经尝试了一些事情,试图清除内存,但无论它建立直到页面冻结。有人知道内存泄漏的问题是什么吗?它发生在FF和ie8 +没有测试低于这一点,在chrome没有内存泄漏,但图像闪烁。
让我提前说一下,我知道这个问题太长了,所以我很抱歉,但我不知道该怎么问。我相信你们所有人都能看到,我对编写web代码的理解有限,所以我也为此道歉。我只是想弄明白为什么记忆会不断累积。希望有一种方法可以修复它,通过更改代码或删除或添加一些代码。
加载脚本。
function UnloadHandler() {
window.removeEventListener('unload', UnloadHandler, true);
}
window.addEventListener('unload', UnloadHandler, true);
jQuery(window).unload(function () { $(window).unbind('unload'); });
jQuery.ajaxSetup ({
cache: false
});
loc = window.location.pathname; // grabs page url. ''
pathName = loc.substring(49, loc.lastIndexOf('.') + 4); // parses out url except for htm file name. ''
var script = jQuery(document).ready(function() {
var test = setInterval(function(){ // Sets the data refresh cycle at 3 seconds. ''
jQuery.get(pathName, function (response) {
var source = $('<div>' + response + '</div>');
jQuery("#GroupData").empty();
(document.getElementById("GroupData")).innerHTML = "";
jQuery('#GroupData').html(source.find('#GroupData').load());
timing(); UnloadHandler();
eval(script);
});
},3*1000); // 3 equals seconds to refresh the data thriugh Ajax ''
});
HTML是这样的
<div id="GroupInfo">
<table style="border:0px; border-style:solid; border-color:#FFFFFF; width:902px; height:20px; border-spacing:0px 1px;border-collapse:seperate; padding:0px; vertical-align:0;">
<tr>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-20x20-Button.png); background-size:30px 22px;width:26px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px;font-weight:bold;"></div></td>
<td style="width:2px;"> </td>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-354x20-Button.png); background-size:365px 22px;width:336px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px; font-weight:bold;">Process Tanks</div></td>
<!-- <td height='10' width='122' bgcolor="#0000FF" ><p align='center'><a><b>Sample</b></td>-->
<td style="width:14px;"> </td>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-122x20-ButtonTest.png); background-size:147px 22px;width:135px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px; font-weight:bold;">Test Status</div></td>
<td style="width:15px;"> </td>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-122x20-ButtonTest.png); background-size:147px 22px;width:136px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px; font-weight:bold;">Adds</div></td>
<td style="width:16px;"> </td>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-122x20-ButtonTest.png); background-size:148px 22px;width:134px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px; font-weight:bold;">Corrective Action</div></td>
</tr>
</table>
</div>
<div id="GroupData" align="center">
<div id="DrawRows">
<table class="DrawRow">
<tr>
<td class="drawrows"></td>
</tr>
</table>
</div>
<SCRIPT type="text/javascript">[ItemsHTML]</script>
</div>
还有一件事,你看到<SCRIPT type="text/javascript">[ItemsHTML]</script>
我不太确定这是如何工作的,我没有写,我只是负责改变它。[ItemsHTML]以某种方式从程序的DB中提取数据并显示如下所示,以代替[ItemsHTML]所以有一个源文件,它创建了一个名为out文件的网页在out文件中,而不是;
<SCRIPT type="text/javascript">[ItemsHTML]</script>
变成了这个;
<SCRIPT type="text/javascript">DrawRow ("G54.HTM","0","00 Chem/Etch/Gain Calculations","","","","","","","","","42","42");
DrawRow ("G78.HTM","0","00 pH Indicators & Reagent Make-Up","","","","","","","Y","6/14/2014 10:21 AM","99","99");
DrawRow ("G55.HTM","6","01 Aurolectroless SMT 520 ENIG","6/9/2014 5:00 AM","6/9/2014 5:00 AM","6/15/2014 5:00 AM","6/15/2014 10:30 AM","","","Y","6/14/2014 7:59 AM","82","99");
DrawRow ("G56.HTM","127","02 Circuposit™ 3000-1 Process","6/6/2014 9:00 AM","6/6/2014 9:00 AM","6/13/2014 9:00 AM","6/14/2014 12:30 AM","","","Y","6/14/2014 1:56 AM","61","60");
DrawRow ("G57.HTM","36","03 Circubond™ 2200 Alternative Oxide","6/9/2014 5:00 AM","6/9/2014 5:00 AM","6/14/2014 5:00 AM","6/14/2014 11:01 AM","","","Y","6/15/2014 3:59 AM","12","9");
DrawRow ("G58.HTM","2","04 Cupulse™ Acid Copper","6/9/2014 6:00 AM","6/9/2014 6:00 AM","6/13/2014 6:00 AM","6/14/2014 9:25 PM","","","","","6","6");
DrawRow ("G59.HTM","0","05 Electroposit™ 1000 Acid Copper","","","","","","","","","16","16");
DrawRow ("G60.HTM","0","06 Electroposit™ 1100 Acid Copper","","","","","","","","","8","8");
DrawRow ("G61.HTM","36","07 EnviroStrip™ Tin Strippers","6/9/2014 5:00 AM","6/9/2014 5:00 AM","6/12/2014 11:00 AM","6/14/2014 9:30 PM","","","","","9","9");
这不是一个公开发布的网站,所有这些都是通过打开"out"文件并让它在显示器上运行来完成的,这样员工就可以看到制造过程中发生了什么。
计时功能显示页面的更新时间。显示最后的更改。它还显示当前时间
function timing(){ // Function for setting time formats for Current and Updated Time ''
var mydate=new Date()
var Time = "Current Time: ";
var Text = "Last Updated: ";
var build = Date.parse('[LastBuild]');
var build2 = dateFormat(build,"dddd m/dd/yy h:MM:ss TT"); // Format for updated time. ''
var build3 = Date.parse(mydate)
var build4 = dateFormat(build3, "dddd m/dd/yy h:MM:ss TT");
document.getElementById('time').innerHTML = Time+" "+ build4; // Sets the current time to chosen format. ''
document.getElementById('time2').innerHTML= Text + " " + build2; // Sets the updated time to format chosen for build2. ''
}
我也有这个刷新页面每分钟。通过清除大量已分配的内存,这几乎解决了问题,但它并没有释放所有的内存。因此,如果您查看图表上的内存概况,它会上升一分钟,然后下降,但不是在30分钟后一直下降,使用的内存增加了一倍。
function refreshPage() { // Sets the page refresh to not scroll in IE ''
var page_y = document.documentElement.scrollTop;
var page_x = document.documentElement.scrollLeft;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y + "&page_x=" + page_x;
}
window.onload = function () {
timing();
UnloadHandler();
setTimeout(refreshPage, 1*60*1000); // Change fist number in equation, the first number represents minutes ''
var match = window.location.href.split('?')[1].split("&");
if (window.location.href.indexOf('page_y') != -1) {
document.documentElement.scrollTop = match[0].split("=")[1];
}
if (window.location.href.indexOf('page_x') != -1) {
document.documentElement.scrollLeft = match[1].split("=")[1];
}
}
我们将分步骤完成:)
删除eval(script);(eval不能被使用,检查stackoverflow讨论:为什么使用JavaScript eval函数是一个坏主意?)
相反,只需调用已声明的函数。下面是修改后的代码: var timer = '';
jQuery.ajaxSetup ({
cache: false
});
loc = window.location.pathname;// grabs page url. ''
pathName = loc.substring(49, loc.lastIndexOf('.') + 4); // parses out url except for htm file name. ''
function script(){
timer = setInterval(function(){// Sets the data refresh cycle at 3 seconds. ''
clearInterval(timer);
jQuery.get(pathName, function (response) {
var source = $('<div>' + response + '</div>');
jQuery("#GroupData").empty();
(document.getElementById("GroupData")).innerHTML = "";
jQuery('#GroupData').html(source.find('#GroupData').load());
timing();
$(window).unbind('unload');
script();
});
},3*1000); // 3 equals seconds to refresh the data thriugh Ajax ''
}
jQuery(document).ready(function() {
script();
});
修改后,"timing()"函数做什么?你能通过你的代码吗?也许这个函数也会造成内存泄漏。
观察:http://www.w3schools.com/jsref/met_win_clearinterval.asp
我认为您的内存泄漏来自您不使用的clearInterval。每次使用带interval的递归函数时,都必须清除预览调用(以避免内存泄漏)。
- 添加文字和评论功能更新Div
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- 使用JavaScript动态插入DIV的成本有多高
- DIV并排,位置不正确
- Div根据<选择>菜单
- Href:当前DIV中的目标ID
- Onchange没有'不要显示或隐藏Div
- 绝对定位不适用于Javascript DIV
- 在Rails中更新Div,而不更改更新请求后的视图
- how to convert html <div> to pdf
- 如何在不影响其他元素的情况下扩展DIV
- 使用jQuery在页面上浮动DIV
- 如何通过点击机身上的任何位置来关闭弹出的DIV
- 单击按钮时Div Increment
- 只从DIV删除图像,而不是整个网站
- 禁用Tab键以进行具有特定Div ID的输入
- 重复应用 d3 转换导致的内存泄漏
- 根据CHECKBOX输入值动态更新DIV信息
- 如何显示在给定极限内存在的所有素数
- Ajax调用重新加载Div内存泄漏