if else文を使用したJqueryのパフォーマンス

Question

現在、私はjQueryを学ぶために最善を尽くしており、以下のコードを作成しています。それは、ページ上の特定のポイントでクラスを削除して変更することだけです。私の質問は、マウスのスクロールごとに文が実行されるか無視できることを意識しているので、このコードがパフォーマンスにどれだけ影響を与えるかです。

ご協力いただきありがとうございます。

マイコード：

function removeActive() { 
    $('#vtop ul li').each(function() { 
     $(this).children('a').removeClass('active'); 
    }); 
} 
$(window).scroll(function() { 
    var pos = $(window).scrollTop(); 
    if (pos <= '521') { 
     removeActive(); 
     $('#m-intro a').addClass('active'); 
    } else if (pos >= '1108' && pos <= '1626') { 
     removeActive(); 
     $('#m-nosales a').addClass('active'); 
    } else if (pos >= '2220' && pos <= '2742') { 
     removeActive(); 
     $('#m-crates a').addClass('active'); 
    } else if (pos >= '3332' && pos <= '3860') { 
     removeActive(); 
     $('#m-packages a').addClass('active'); 
    } else if (pos >= '4444' && pos <= '4966') { 
     removeActive(); 
     $('#m-signup a').addClass('active'); 
    } else if (pos >= '5556') { 
     removeActive(); 
     $('#m-contact a').addClass('active'); 
    } 
    $('#divd').text(pos); 
}); 

Answer 1

私は、必要がないときにチェックしていないことを確認する状態を追加します。それ以外の場合は、いずれかの領域にあるすべてのピクセルがクリアされ、アクティブな状態が設定されます。これは単純な境界チェックを行うよりも高価です。また、状態の比較を最初に行います。これは、誤っている可能性がより高いためです。

function removeActive() { 
    $('#vtop ul li > a').removeClass('active'); 
} 

var active = ''; 
$(window).scroll(function() { 
    var pos = $(window).scrollTop(); 
    if (active != 'intro' && pos <= '521') { 
     removeActive(); 
     active = 'intro'; 
     $('#m-intro a').addClass('active'); 
    } else if (active != 'nosales' && pos >= '1108' && pos <= '1626') { 
     removeActive(); 
     active = 'nosales'; 
     $('#m-nosales a').addClass('active'); 
    } else if (active != 'crates' && pos >= '2220' && pos <= '2742') { 
     removeActive(); 
     active = 'crates'; 
     $('#m-crates a').addClass('active'); 
    } else if (active != 'packages' && pos >= '3332' && pos <= '3860') { 
     removeActive(); 
     active = 'packages'; 
     $('#m-packages a').addClass('active'); 
    } else if (active != 'signup' && pos >= '4444' && pos <= '4966') { 
     removeActive(); 
     active = 'signup'; 
     $('#m-signup a').addClass('active'); 
    } else if (active != 'contact' && pos >= '5556') { 
     removeActive(); 
     active = 'contact'; 
     $('#m-contact a').addClass('active'); 
    } else if (active != '') { 
     active = ''; 
    } 
    $('#divd').text(pos); 
}); 

また、リッテを簡素化することができます：

var active = ''; 
var prevActive = ''; 

$(window).scroll(function() { 
    var pos = $(window).scrollTop(); 
    if (pos <= 521) { 
     active = 'intro'; 
    } else if (pos <= 1107) { 
     active = ''; 
    } else if (pos <= 1626) { 
     active = 'nosales'; 
    } else if (pos <= 2219) { 
     active = ''; 
    } else if (pos <= 2742) { 
     active = 'crates'; 
    } else if (pos <= 3331) { 
     active = ''; 
    } else if (pos <= 3860) { 
     active = 'packages'; 
    } else if (pos <= 4443) { 
     active = ''; 
    } else if (pos <= 4966) { 
     active = 'signup'; 
    } else if (pos <= 5555) { 
     active = ''; 
    } else { 
     active = 'contact'; 
    } 

    if(active != prevActive) { 
     $('#vtop ul li > a').removeClass('active'); 
     if(active != '') { 
      $('#m-'+active+' a').addClass('active'); 
     } 
     prevActive = active; 
    } 

    $('#divd').text(pos); 
}); 

私は一緒に同じようなことを行う例をハッキング。これは、同じHTML構造を持っていませんが、それは、スクロールの挙動を示しています

http://jsfiddle.net/z7YHX/

Answer 2

$('#vtop ul li').each(function(){ 
    $(this).children('a').removeClass('active'); 
}); 

は限り

$('#vtop ul li > a').removeClass('active'); 

に単純化することができるようにスクロールイベント中の文は、私はそれまたはそれと間違って何も表示されない場合深刻な減速を引き起こすでしょう。

Answer 3

パフォーマンスについてはわかりませんが、このようなものは読みやすいです。それを試してみませんでしたが、あなたは考えを得る...別のオプションは、switchステートメントを代わりに使用することです。

var elms = { 
    intro: { min: 0, max: 521 }, 
    nosales: { min: 1108, max: 1626 }, 
    crates: { min: 2220, max: 2742 }, 
    packages: { min: 3332, max: 3860 }, 
    signup: { min: 4444, max: 4966 }, 
    contact: { min: 5556, max: $(window).height() } 
}; 
$(window).scroll(function() { 
    var pos = $(window).scrollTop(); 
    for (var el in elms) { 
     var min = elms[el].min, 
      max = elms[el].max; 
     if (pos >= min && pos <= max) { 
      $('#vtop ul li > a').removeClass('active'); 
      $('#m-' + elms[el]).addClass('active'); 
      break; 
     } 
    } 
}); 

Answer 4

その良いコードが、私はこのコードを書くより保守方法があると思います - オブジェクトリテラルを使用しては - そのダウンロードも少なくなります。

var bands = { 
    intro: [0,521], 
    nosales:[1108,1626], 
    crates:[2220,2742], 
    packages:[3332,3860], 
    signup: [4444, 4966], 
    contact: [5556, 99999]}; 

var win = $(window); //Cache for speed 

win.scroll(function() { 
    var pos = win.scrollTop(); 

    for (var key in bands) { 
     var band = bands[key]; 
     if (pos >= band[0] && pos <= band[1]) { 
      $('#vtop ul li > a').removeClass('active'); 
      $('#m-' + key + ' a').addClass('active'); 
      break; 
     } 
    } 
});