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)定位所有:not(.child)類。 使用console.log （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(breadcrumbOver).unbind(breadcrumbOut);