Question

以下代码导致内存泄漏（您可以看到这种情况发生的情况越多，您进出的速度就越慢）。很遗憾，我无法在我的办公室下载javascript profiler（我可以，它只需要几天/几周）。

以下是代码，只是下拉菜单的一些简单转换：

$(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/（反复翻身＆＃34;健康，安全和安全＆＃34;然后滚过它的孩子看到效果发生，动画幻灯片也没有＆如果你进出足够快的话，有时候会开火。

Answer 1

问题看起来可能在您的初始选择器中。它定位li下ul下nav下的所有$("nav ul li") ...代码，其中包括所有子孙。

hover

这会导致它向li下的所有nav代码添加hover回调，然后当您悬停时，会添加另一个$("nav>ul>li")回调。

您可能希望对其更加具体，例如专门针对直接子女。

:not(.child)

如果您有子课程，您还可以使用console.log来定位不是孩子的所有内容。使用{{1}}（内置于Chrome或使用Firebug）来记录这些选择器所提取的内容，以确保您获得所期望的内容。

Answer 2

我看到你在谈论乔治;在盒子打开几次后快速切换元素时，效果最明显。

也许这会影响你所看到的东西。我读了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);

jQuery代码导致内存泄漏

2 个答案: