Memory Leaks in jQuery UI

Question

I have a simple page that consists of a table with three jQuery UI progressbars and an ajax call.

The ajax calls out to an empty php file and on success I destroy and recreate my progressbars.

It seems simple but running it caused memory leaks in both IE7 and Chrome (although Chrome handled it much more gracefully).

Here's my code:

<script type="text/javascript" src="jQuery/js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="jQuery/js/plugins/jquery-ui-1.6rc4.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/css/ui.all.css" />

<script type="text/javascript">
$(function(){
    timed();    
});

function timed()
{
    $.ajax({
        url: "index.php",
        success: function(msg){
            $(".progressbar").progressbar("destroy").progressbar();
        }
    });

    setTimeout("timed()",1000);
}

<table> 
<tbody>
    <tr> 
        <td>
          <div class="progressbar"></div>
        </td>
        <td>
          <div class="progressbar"></div>
        </td>
        <td>
          <div class="progressbar"></div>
        </td>
    </tr> 
</tbody>

Any ideas for what I'm missing here?

I've tried adding $("*").unbind(); before the $(".progressbar") line in my Success function.

Answer 1

Why are you destroying then recreating it? Wouldn't it be simpler to just reset the progress values to zero and leave it alone until you need it again later. You can even .hide() it if you specifically don't want it visible.

Answer 2

I think what I'll do is just create the progress bar at the application start, clone it, and add it to my template after its finished processing. This essentially slows the memory usage to a crawl (about 4k every 4-5 refreshes) rather than the current (about 100 to 300 k per refresh).