jQuery - Memory leak/garbage collection with .remove()/.after()

Question

After leaving my browser window open all weekend, I came in this morning to the office with a hosed IE. I'm doing a 'stats' dashboard bar that updates every 30 seconds.

The return is an html string, as a full xcontents

I'm appending this to the DOM, after my 'real' div, #ajaxreturn, which actually hosues something else. I want this to show up after it.

If it exists, remove it from the dom. append result to dom.

$(function(){
function getAD() {
    var request = $.ajax({  
        url: "getdashboard/"
        ,  type: "GET"              
        ,  cache: false
        ,  dataType: "html"
    });
    request.done(function(msg) {
        if($('#adminbar').length){
            $('#adminbar').remove();
        }
        $('#ajaxreturn').after(msg);
    });
}

//INIT AND RELOAD INTERVALS

//get DashBoard
getAD();
//and then look for updates every 30 seconds
var gb = setInterval(getAD,3000);
});

My assumption was that this would destory or send it to garbage colelction. But it doesn't seem to be the case. I add about 15KB to my IE session every 30 seconds.

Should I be using something else besides remove()?

Answer 1

As I know, jQuery caching everything and put it to $.cache

You need to disable caching, using:

$.ajaxSetup({cache:false});

jQuery.cache = {}

Sizzle.selectors.cacheLength $.expr.cacheLength = 1 https://github.com/jquery/sizzle/wiki/Sizzle-Documentation#sizzleselectorscachelength--number