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 回调，然后当您将鼠标悬停时，它会添加另一个hover 回调。

您可能希望更具体地使用它，例如专门针对直接子代。

$("nav>ul>li")

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

Answer 2

我明白你在说乔治；多次打开盒子后在元素之间快速滑动时效果最为明显。

也许这会影响您所看到的内容。我阅读了stop() 并觉得它可能会对您所看到的内容产生影响。您可以在stop() 中指定的第一个属性是 clearQueue。第二个同样有趣。以下是文档所说的：

clearQueue 一个布尔值，指示是否也删除排队的动画。默认为假。 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);