title: Automatic web-page refresh memory leak using XMLHttpRequest
body: <p>Greetings,<br>
  I've been working on a web-interface for some hardware that uses an 8-bit microcontroller.  The web page uses HTML, javascript, JSON and XHR (XMLHttpRequest) for its communications.  What I'm trying to do is create a page that updates every 250mS with new values from the controller using setInterval so that the web page gets updated 'real-time' to make it feel more like an application to the user.</p>
  
  <p>I've gotten it to work for the most part, but found that there's a memory leak somewhere in the code with both browsers that I've tested, IE and Chrome.  </p>
  
  <p>I've researched this online and it seems like other people have had the same problem and I've tried to implement different fixes with no success.</p>
  
  <p>Here are a few snap-shots of code that will hopefully explain things a little better, I've modified variables so they make more sense without seeing the full application.</p>
  
  <pre><code>// start the pageRefreshTimer to update values
  var pageRefreshTimer = window.setInterval(updateValues, 250);
  
  // Standard XHR opener
  HTTP.getText = function(url, callback) {
      var request = HTTP.newRequest(); // Searches array of standard XMLHttpRequest functions to try, code not shown...
      request.onreadystatechange = function () {
          if (request.readyState == 4 &amp;&amp; request.status == 200) {
              callback(request.responseText) // responseText becomes JSONText below
          }
      }
      request.open("GET", url);
      request.send(null);
  }
  
  // Function that is constantly refreshed by HTML page to simulate real-time application
  updateValues = function(parameter, value) {
  
      newURL = newURL + "?" + parameter; // newURL is defined elsewhere in the code...
  
      // Send the url and create the JSONObject
      HTTP.getText(newURL, function(JSONText) {
                      var JSONObject = eval('(' + JSONText + ')'); // Specific notation for JSON
  
                      // Load object values into Javascript variables
                      Controller.detectorPosition = JSONObject.detectorPosition;
                      Controller.offset = JSONObject.offset;
                      Controller.actuatorPosition = JSONObject.actuatorPosition;
      });
  
      delete JSONObject; // My attempt at manual garbage collection, didn't resolve the memory leak
  }
  </code></pre>
  
  <p>For your reference, the JSON file that would be sent from the microcontroller to the browser would look something like this...</p>
  
  <pre><code>{ "offset": "1500", 
  "detectorPosition": "1558", 
  "actuatorPosition": "120" }
  </code></pre>
  
  <p>Does this look like an issue with "closures" in the code? </p>
  
  <p>Using the Developer Tools in Chrome (Ctrl-Shift-J), I noticed that there are multiple calls to the ParameterValues.json file (350B size) like it should since this is the JSON object that stores the values from the microcontroller; but is the browser somehow storing/caching every page in memory?</p>
  
  <p>Attached in my comments are two screen shots of the issue.  The second one is where I setup a break-point in the XMLHttpRequest loop, and it looks like there's a circular reference in the "closure" panel on the right hand side.  Anyone see an issue with this?</p>
  
  <p>What can I do to dig deeper and get more information?</p>
  
  <p>Thanks in advance!</p>