Question

The following code is causing a memory leak (you can see this happening the more you hover in and out the slower it gets). Unfortunately I am unable to download a javascript profiler in my office (I can, it will just take me a few days/ weeks).

Here is the code, just some simple transitions for a 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 may be occuring?

Edit: Live example here – http://rcnhca.org.uk/sandbox/ (Repeatedly roll over “Health, Safety and Security” then roll over it’s children to see the effect happen, also the animation slideDown doesn’t fire sometimes if you roll in and out fast enough).

Answer 1

The problem looks like it might be in your initial selector. It targets all li tags under a ul under nav, which includes all children and grandchildren.

$("nav ul li") ...

This causes it to add a hover callback to all li tags under nav, then when you hover it adds yet another hover callback.

You might want to be more specific with it, such as specifically targeting the direct children.

$("nav>ul>li")

If you have children classes, you can also use :not(.child) to target everything that’s not a child. Use console.log (which is built into Chrome or using Firebug) to log what those selectors are pulling to make sure you’re getting what you expect.