Geek Answers Handbook

JQuery leaky code

The following code causes a memory leak (you can see that this happens, the more you enter and exit it more slowly). Unfortunately, I can’t download the javascript profiler in my office (I can, it only takes me a few days / weeks).

Here is the code, just some simple transitions for the dropdown menu:

$(document).ready(function(){
    breadcrumbOver = function () {
        $(this).stop().animate({ backgroundColor: "#3393b5", textIndent: 15 }, 250);
    }
    breadcrumbOut = function () {
        $(this).stop().animate({ backgroundColor: "#738793", textIndent: 0 }, 250);
    }
    $("nav ul li").hover(
      function () {
        $(this).children('ul.child').stop().slideDown('fast').children('li').hover(breadcrumbOver, breadcrumbOut);
      }, 
      function () {
        $(this).children('ul.child').stop().slideUp('fast').unbind(breadcrumbOver, breadcrumbOut);
      }
    );
});

Can anyone see where a memory leak could occur?

Edit: an example is shown here: http://rcnhca.org.uk/sandbox/ (Flip Health, Safety, and Security again, then flip it to see the effect, also the slideDown animation doesn’t work sometimes if you log in quickly enough and come out).

+1
2

, . li ul nav, .

$("nav ul li") ...

hover li nav, hover.

, , .

$("nav>ul>li")

, :not(.child) , . console.log ( Chrome Firebug) , , , , .

+6

, ; , .

, , , . stop() , , . , stop(), - clearQueue. . :

clearQueue , , . false. jumpToEnd , , . false.

, :

$(this).children('ul.child').stop(true, true)...
// (or  you want the animation to unwind, I suppose)
$(this).children('ul.child').stop(true)...

, unbind, , , . , :

...unbind(breadcrumbOver).unbind(breadcrumbOut);
+2

More articles:


All Articles