Question

I have a strange behaviour. I am using a rather heavy page (4000 nodes) meant to display a dispatch system for delivery operations. Every 30 sec. I am refreshing with jquery, the list of operations (3000 nodes over 4000). It works perfectly well, but… each time, the memory of both firefox and chrome is increasing by 3 to 6ko. Of course, after a while, the browser crashes…

Does anybody have any kind of idea why? Is it a memory leak? Does javascript fail to somewhere? I checked, and after each refresh I have the same number of nodes which means the replacement is performed properly.

After each refresh operation I reset a couple of events : here is an example

$("#orders_list .list_table_row").hover(
            function(){
            //  mouse over
                $(this).children().css("background-color","#E0E0E0");   
            },
            function(){
            //  mouse out
                $(this).children().css("background-color","");  
            });

Any suggestion is really welcome, hints, anything…

I found 2 interesting links :
http://www.javascriptkit.com/javatutors/closuresleak/index3.shtml and
http://www.jibbering.com/faq/faq_notes/closures.html

Thanks,
Paul

Revision 1 – added code sample and links

Answer 1

Your problem is probably the event handlers. Managing the binding and unbinding of all those nodes every refresh is probably over-complex.

Try using event delegation instead. jQuery’s .live() method is what you want. It will make the refreshes faster and remove the event handler complexity and leaks.

Instead of $(".myclass").click(/*...*/) use $(".myclass").live("click", /*...*/). You only have to do it once, at page load, and it will work for all future elements with that class, even following your ajax refreshes.

See documentation: http://api.jquery.com/live/