1

私は基本的にページの上部に固定された h2 を保持する関数 stickyhead() を持っています。ページを下にスクロールすると、新しい h2 に到達すると h2 のテキストが変化するため、iPhone またはアンドロイド携帯。A で始まる名前の連絡先をスクロールすると、文字 A のヘッダーが上部に貼り付けられ、B の名前に到達すると、ページ上部のヘッダーのテキストが B に変更されます。.switchラベルにクラスが選択されているときにこれを有効/無効にしたい。以下のコードは問題なく動作しますが、これは悪い方法でしょうか? 関数を複数回リロードしていますか? それを行うより良い方法はありますか？

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

3 に答える 3

0

関数をバインドしたままにし、ステータス変数を使用して実際に何かを行うかどうかを判断する方が効率的かもしれstickyhead()ません。

例えば

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

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

次に、関数のバインドを解除するのではなく、使用するだけですstickyheadActive=false;

于 2010-11-22T09:19:46.010 に答える
0

コードを視覚化するのに少し苦労していますが、常にバインドとバインド解除を行う必要があるとは考えにくいです。条件付きでハンドラーのコードを実行するスクロール ハンドラーにブール値が必要です。

var doStickyHead = true;
$(window).scroll(function(){
    if (doStickyHead) {
        // do your code
    }
});
$('.switch').click(function(){
    doStickyHead = !doStickyHead; // invert the value of doStickyHead
});
于 2010-11-22T09:21:57.873 に答える
0 
//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;
    }
});

ただし、必要でないことが予想されるときにハンドラーのバインドを解除しないことは、メモリの浪費になることに注意してください。バインド/バインド解除は見苦しいですが、リソースが不足している場合は正当化できます。

また、要素が削除され、ハンドラーがバインドされたままになると... Viola! メモリ リークに最適なケースです。無関係に思えるかもしれませんが、モバイル プラットフォーム向けにこれを書いている場合に備えて、これについて言及する必要があると感じました。

于 2010-11-22T11:48:52.293 に答える