Huge Memory Leaks with XMLHttp POST Request

Question

How can i avoid XHR POST Memory leak? I go through lots of web pages regarding XHR memory leak but there is no good solutions. My problem is almost similar to this That blog explains the problem but no solutions.

My Problem: I have a web app which Continuously send date to server (2Mb to 80Mb) and it will make 10 to 300 requests. It is POST request. for GET request no big problem like this.

How can i solve this? Circular reference, Scope , closer etc i try but no success. i try to use delete keyword for readystate change, delete previous xhr object , try to reuse xhr , xhr reference to null , changing coding patters etc

This is the sample code. this is the functionality i need

 var base_string =  "ABCDEFGHIJKLMNOPQUST01234567890!@#$%^&:ABCDEFGHIJKLMNOPQUST01234567890!@#$%^&ABCDEFGHIJKLMNOPQUST01234567890!@#$%^&";
            base_string += base_string;  
            base_string += base_string; 
            base_string += base_string; 
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string; 
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string; 
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            base_string += base_string;  
            this.sampleData = base_string;
            var dataToSend = this.sampleData.substring( 0, 2000000 );



           this.xhr = [];
           this.xhr[0] = new XMLHttpRequest();
           function sendRequest (){
               var Self = this;
               Self.xhr[0].onload = function (test) {
                   sendRequest ();
               };

               Self.xhr[0].open("POST", "http://localhost/upload.php" + "?n=" +  Math.random(), true);
               Self.xhr[0].send(dataToSend);
           }
           sendRequest ();

How can i accomplish this without Memory leaks?

Answer 1

Clean up your code - this should do the same thing without the bizarre and pointless use of Self, and the array ... it also re-initializes xhr

I've changed to add a listener to the upload load event - a quick test here seems to not leak (seems to)

// snip
this.sampleData = base_string;
var dataToSend = this.sampleData.substring( 0, 2000000 );

function sendRequest (){
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('load', function (e) {
        sendRequest ();
    });

    xhr.open("POST", "http://localhost/upload.php" + "?n=" +  Math.random(), true);
    xhr.send(dataToSend);
}
sendRequest ();