导致内存泄漏的 jQuery 代码

jQuery code causing memory leak

本文关键字：jQuery 代码 泄漏 内存      更新时间：2023-09-26

以下代码导致内存泄漏（你可以看到这种情况发生，你把鼠标悬停在和悬停的越多，它的速度就越慢）。不幸的是，我无法在我的办公室下载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/（反复滚动"健康，安全和保障"然后滚动到它的孩子以查看效果发生，如果您滚入和滚出足够快，动画幻灯片有时不会触发）。

问题似乎出在您的初始选择器中。它针对nav下ul下的所有li标签，其中包括所有子项和孙项。

$("nav ul li") ...

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

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

$("nav>ul>li")

如果您有儿童课程，您还可以使用:not(.child)来定位所有不属于儿童的内容。使用console.log（内置于 Chrome 或使用 Firebug）记录这些选择器正在提取的内容，以确保您得到期望的内容。

我知道你在说什么乔治; 在打开盒子几次后，在元素之间快速滑动时，效果最明显。

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

clearQueue 一个布尔值，指示是否同时删除排队的动画。默认为 false。 跳转结束一个布尔值，指示是否立即完成当前动画。默认为 false。

可能值得一试，像这样传递：

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

另外，我也检查了解绑，我认为你不能像你一样传递两个事件。也许你可以这样使用它，而不会遇到你遇到的问题：

...unbind(breadcrumbOver).unbind(breadcrumbOut);
相关文章：