javascript - 导致内存泄漏的 jQuery 代码

Question

以下代码导致了内存泄漏(您可以看到这种情况发生得越多，越是悬停越慢)。不幸的是，我无法在我的办公室下载 javascript 分析器(我可以，这只需要几天/几周的时间)。

这是代码，只是下拉菜单的一些简单转换:

$(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);
      }
    );
});

谁能看出可能发生内存泄漏的地方？

编辑:此处为现场示例 - http://rcnhca.org.uk/sandbox/ (反复滚动“健康、安全和保障”，然后滚动它的子项以查看效果，如果您滚动足够快，动画 slideDown 有时不会触发)。

Answer 1

问题看起来可能出在您的初始选择器中。它针对 nav 下的 ul 下的所有 li 标记，包括所有子级和孙级。

$("nav ul li") ...

这会导致它向 nav 下的所有 li 标记添加一个 hover 回调，然后当您悬停时它会添加另一个 悬停回调。

您可能希望更具体一些，例如专门针对直系子级。

$("nav>ul>li")

如果您有子类，您还可以使用 :not(.child) 来定位所有非子类。使用 console.log(内置于 Chrome 或使用 Firebug)来记录这些选择器正在拉动的内容，以确保您得到了预期的结果。