0

私はこの機能を持っていました：

function loadCollapse() {
  function collapseDetail() {
    $(this).next().fadeToggle(500);
  }    

  //toggle the componenet with class summary  
  $("span.summary").unbind('click',collapseDetail);
  $("span.summary").click(collapseDetail);
}

この関数はajaxComplete()イベントにバインドされ、すべての ajax リクエストが終了するたびに実行されます。奇妙なことは、アンバインドが機能しないことです。

collapseDetail()が の外で定義/移動された場合にのみ機能しloadCollapse()ます。なんで？

関数内の関数は、その関数が実行されるたびに本当に再定義されますか?

これにより、心配する必要がある潜在的なメモリ/パフォーマンスの問題はありますか?

4

1 に答える 1

4

関数を呼び出すたびにcollapseDetail関数が再定義されるため、前回作成した関数とは異なる関数になります。これは別の関数であり、最初の呼び出しでバインドした関数ではないため、この新しいcollapseDetail関数はバインドされなかったため、バインド解除は効果がありません。

これを解決する1つの方法の例：

function generateLoadCollapse() {
    var collapseDetail = function() {
        $(this).next().fadeToggle(500);
    };

    var loadCollapse = function() {
        $("span.summary").unbind('click',collapseDetail);
        $("span.summary").click(collapseDetail);
    };

    return loadCollapse;
}

別の方法は次のようになります。

function generateLoadCollapse() {
    return (function() {
        this.collapseDetail = function() {
            $(this).next().fadeToggle(500);
        };

        $("span.summary").unbind('click',this.collapseDetail);
        $("span.summary").click(this.collapseDetail);
    })();
}

次に、この関数から返された値を、以前に持っていた値に割り当てることができますloadCollapse。

loadCollapse = generateLoadCollapse();
于 2012-10-11T08:45:23.230 に答える