Automatic web-page refresh memory leak using XMLHttpRequest

Question

Greetings,
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.

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.

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.

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.

// 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 && 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
}

For your reference, the JSON file that would be sent from the microcontroller to the browser would look something like this...

{ "offset": "1500", 
"detectorPosition": "1558", 
"actuatorPosition": "120" }

Does this look like an issue with "closures" in the code?

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?

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?

What can I do to dig deeper and get more information?

Thanks in advance!

Answer 1

There is a Google Code project that has created a cross-browser implementation of XMLHttpRequest. They also maintain a small list of native XMLHttpRequest bugs that might be useful to you.

The following bug seems potentially applicable to your situation:

Bug: The instance of XMLHttpRequest doesn't get garbage collected in case you have a reference to the instance or to an other [sic] COM object (for example: DOM Node etc.) in its onreadystatechange handler, thus producing runtime memory leaks.