Ajax調用以重新加載Div內存泄漏

Question

關於如何改善我的問題的任何建議？

因此，我有HTML和Javascript代碼，這些數據可以從用於實驗室分析統計分析的程序的數據庫中提取數據。 例如，您有一個電鍍浴，說銅，您需要找出濃度，取電鍍浴的pH值，然后將其插入程序中，並保存該信息。 在網頁上，它直觀地顯示了已記錄的內容，下一次添加的到期時間以及您需要更改的時間。

因此，我想每三秒鍾刷新一次頁面，以顯示倒數計時，直到進行下一次測試為止，“我已使用下面的代碼完成了此操作，但是內存泄漏，您可以看到我嘗試了嘗試清除內存的事物的數量，但是無論它構建什么，直到頁面凍結為止。 誰能看到內存泄漏的問題所在？ 在FF和IE 8+尚未測試的情況下發生這種情況，在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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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]以某種方式將數據從程序中拉出數據庫，並代替[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];
}
     }

Answer 1

觀看： http : //www.w3schools.com/jsref/met_win_clearinterval.asp

我認為您的內存泄漏來自您未使用的clearInterval。 每次使用帶有間隔的遞歸函數時，都必須清除預覽調用（以避免內存泄漏）。

最好的祝福

Answer 2

我們將逐步執行此操作：）

刪除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（）”函數做什么？ 你能過去代碼嗎？ 也許該功能也會造成內存泄漏。