XMLHttpRequest + setTimeout = Memory leak

Question

I'm developing a chrome extension and I tried hard all the solutions in the web but no one seems to work. My jsscript only consume an html (about 13,30k per request) via XMLHttpReq(XHR) and parse the response , dropping everything that no match with some regex. All this happen with a setTimeout inside in the XHR onload method and seems to work but the problem comes after 10minutes aprox. when I saw what happens in memory. After 10minutes the extensions mem grows from 10mb to 60. So ..what happens and exist any kind of solution to this? I read that is a normal grow because its a new request and the Garbage Collector runs after a while (so late) but for my its another thing. Thanks in advance.

      var CHECK_TIME = 30000;  
      var request = new XMLHttpRequest();

      var checkLastPage = {
        url:"http://www.last.fm/inbox",
        inboxId:"inboxLink",
        lastAttempt:0,    
        init : function(){        
            request.onload = function(){
              checkLastPage.loadStuff(request);
              setTimeout(checkLastPage.init, CHECK_TIME);          
            } 
            request.open("GET",checkLastPage.url,false);
            request.send();
        },
        loadStuff:function(request){
            var node = checkLastPage.getInboxNode(request);
//...more code
        },
        getInboxNode:function(request){
            var htmlTemp = document.createElement('div');
                htmlTemp.innerHTML = request.responseText;   // Hack horrible para poder parsear el nodo importante                     
            var htmlResponse =  htmlTemp.getElementsByTagName('li');
            var relevantNode = null;
             for (var i = 0; i < htmlResponse.length; i++) {
                var node = htmlResponse[i];
                if(node.id == checkLastPage.inboxId){
                  relevantNode = node;
                }                
             }
             htmlResponse = null;
             htmlTemp = null;   
             return relevantNode;
        }, //...more code}

Also I test that with JQUery and an outter setInterval but same result :

  var CHECK_TIME = 30000;         
  var checkLastPage = {
    url:"http://www.last.fm/inbox",
    inboxId:"inboxLink",
    lastAttempt:0,    
    init : function(){        
       $get(checkLastPage.url,function(data){
           console.log(data)
        }            
    }
    //more code ...
  }

  setInterval(checkLastPage.init,CHECK_TIME)

Answer 1

It's probably not a good idea to be calling setTimeout from within the callback method.

I think that calling setTimeout from within the callback routine may be preventing the browser from collecting garbage properly.

You might want to look into jQuery, which provides a nice convenient frame work for XHR, but I think you can fix your memory problem by moving your call to setTimeout to an outer scope, changing it to setInterval, and only calling it once.