memory leaks - Jquery auto refresh div

Question

Jquery auto refresh is using up a LOT of browser memory. Is there a way to stop this. I had a 2 div refreshing every 3 seconds but I moved it up to 9 and 15 seconds, It helped a little bit the longer the window stays open on my site the more memory it takes until finally the browser crashes.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>


<script>
var auto_refresh = setInterval(
function ()
{
$('#details2').load('links2.php').fadeIn("slow");
}, 15000); // refresh every 10000 milliseconds</script>

Answer 1

You could try to skip the load() and use $.ajax instead. I know load(); is an ajax request but I seem to recall it fetches the whole script. Try requesting a script, do your database calculations and return the data as json. I assume you're sending complete html with the data from the database request. Try this with json instead.

You'll get the data as an object, like this for example.

{"variable":"foo"}

Then you can fetch the data with a simple each statement.

$.ajax({
    url: "links2.php",
    type: "POST",
    dataType: "json",
    success: function(data){

       // data here is returned as objects since it's json
       $.each(data, function(key, value) {
            $("#details2").empty().append(value.variable);
       }); 

    }
});

I think this shouldn't leak your memory and eventually crash your browser, even though you call it every other second or so. Give it a try and let me know how it goes.

Good luck!