Jquery：機能を有効/無効にしますか？ （bind/unbind？）これを行う最善の方法は？

Question

私は基本的にページの上部に固定されたh2を維持するstickyhead（）関数を持っています。ページを下にスクロールすると、新しいh2に達するとh2のテキストが変化します。 iPhoneまたはAndroidの携帯電話。 Aから始まる名前を持つ連絡先をスクロールすると、Aの付いたヘッダーが一番上に表示され、Bの名前に達すると、ページの先頭のヘッダーのテキストがBに変わります。 .switchラベルにクラスが選択されているときに有効/無効にしたいと思います。下のコードは正常に動作しますが、これを行うには悪い方法であるかどうか疑問に思っていますか？私の機能を何度もリロードしていますか？それを行うより良い方法はありますか？

$('.switch').click(function() { 
if ($('.switch label').hasClass('selected')) { 
    stickyhead(); 
} else { 
    $(window).unbind('scroll'); 
} 
}); 

Answer 1

//Assuming I've understood the scenario correctly, wouldn't this work. 
$('.switch').delegate("label.selected", "click", function() { 
    if (stickyheadActive){ 
     //do your stuff here 
    } 
    else{ 
     return; 
    } 
}); 

をしかし覚えておいてください、予想どおりに必須ではありませんアンバインドしませハンドラはメモリの無駄です。 バインディング/バインド解除は、リソースが不足している場合は醜いですが正当な理由があります。

また、要素が削除され、ハンドラがバインドされたままになっていると...ビオラ！メモリリークの完全なケース。無関係に思えるかもしれませんが、ちょうどあなたがモバイルプラットフォーム用にこれを書いている場合には、私はこれについて言及すべきであると感じました。

Answer 2

バインドさ機能を維持するために、より効率的かもしれないが、stickyhead()は、実際には何をしているか否かを判断するために、状態変数を使用します。

例えば

function stickyhead(){ 
    if (!stickyheadActive) return; //Guard clause to prevent action 

    //...Your current code...// 
} 

その後

だけではなく、私はあなたのコードを視覚化するために少し苦労していますが、それはあなたが常に結合およびアンバインドする必要があることそうだstickyheadActive=false;

Answer 3

を使用する機能のバインドを解除。あなたは条件付きでハンドラのコードを実行し、あなたのスクロールハンドラのbooleanれている必要があります。

var doStickyHead = true; 
$(window).scroll(function(){ 
    if (doStickyHead) { 
     // do your code 
    } 
}); 
$('.switch').click(function(){ 
    doStickyHead = !doStickyHead; // invert the value of doStickyHead 
});