Ajax Call to Reload Div Memory Leak

Question

Any Suggestions on how i can make my question better?

So I have HTML and Javascript code that takes data out of a DB of a program that is used for statistical analysis of Lab Analysis. For example you have a plating bath say copper and you need to find out the concentration, you take the pH of the bath you then plug it into the program and it saves that information. On the webpage it shows you visually what has been recorded, when the next add is due and how long you have to make changes.

So I then would like to refresh the page every three seconds to show the times counting down till the next test is due, 'I have accomplished this with the code below, however there is a memory leak and as you can see i have tried a number of things to try to clear the memory, but no matter what it builds till the page freezes. Can anyone see what the issue is with the memory leak? It happens in FF and IE 8+ havent tested below that, in chrome no memory leak, but the images flash.

Let me say in advance, I know this is too long a question, so I am sorry, but I don't know how to ask it any other way. As I am sure all of you can see I have a limited understanding of writting web code, so I apologize for that too. I'm just trying to understand why the memory builds and builds. Hopefully there is a way to fix it, by changing the code or removing or adding some code.

To Reload script.

    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  \\
}); 

The HTML looks like this.

<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>

One more thing where you see <SCRIPT type="text/javascript">[ItemsHTML]</script> I'm not exactly sure how this works, I didn't write I'm just in charge of changing it. the [ItemsHTML] somehow pulls the data out of the DB from the program and displays it as shown below in place of [ItemsHTML] so there is a source file with this code and it creates a webpage called an out file and in the out file instead of;

<SCRIPT type="text/javascript">[ItemsHTML]</script>

it becomes this;

<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");

This is not a published website it is all done by opening the "out" file and letting it run on a display so employees can see what is going on with the manufacturing process.

Timing function displays an updated time for the page.. showing the last change made. Also it shows current time

    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.  \\
}

I also have this to refresh the page ever minute. This almost fixes the problem by clearing a lot of the allocated memory built up, but it doesnt release all of it. So if your looking at the memory profiled on a graph it goes up for a minute then dips down, but not all the way down after 30 minutes te memory used has doubled. See below for refresh with no scroll to top.

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

Watch : http://www.w3schools.com/jsref/met_win_clearinterval.asp

I think your Memory leak comes from a clearInterval that you don't use. Every time you use a recursive function with interval, you have to clear previews calls (for avoid memory leak).

Best regards

Answer 2

We are going to do this by steps :)

Remove the eval(script); (eval must not be used, check stackoverflow discussion : Why is using the JavaScript eval function a bad idea? )

Instead, just call a declared function. Here is your code modified :

    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();
}); 

After modifying this, what does the "timing()" function do ? can you past your code ? Maybe the function creates a memory leaks too.