jQueryを単純なjQueryから削除するにはどうすればいいですか？addClass/removeクラスからjankを削除するには

Question

ユーザーがスクロールを開始した後にナビゲーションバーにCSSクラスを追加する簡単なスクリプトがあります。ページ。

しかし、これはかなりの量のジャンク（fps lag）を引き起こし、100％はパフォーマンスヒットに値しません。

これを最適化する方法や、ジャンクを起こさずに動作させる方法はありますか？

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    var navbar = $('#navbar'); 

    if (scroll >= 40) { 
     navbar.addClass("navbar-border"); 
    } else { 
     navbar.removeClass("navbar-border"); 
    } 
}); 

そうでない場合は削除します。

ありがとうございます！

Answer 1

コードはパフォーマンス上の問題の原因である1秒間に100回、潜在的にDOMにアクセスしています。パフォーマンスを改善するために、スクロールイベントを抑制して、最初にスクロールを解除するタイムアウトイベントは遅延（しきい値）の後にバインドします。しきい値を増やすと、コードの実行頻度が低下します。

var navbar = $('#navbar-border'); 
var threshold = 100; // in milliseconds 

function borderControl() { 
    console.log("run"); 
    var scroll = $(window).scrollTop(); 
    if (scroll >= 40) { 
    navbar.addClass("navbar-border"); 
    } else { 
    navbar.removeClass("navbar-border"); 
    } 
} 

function setScrollTimer() { 
    unbindScroll(); 
    scrollTimer = window.setTimeout(function() { 
    bindScroll() 
    }, threshold); 
} 

function unbindScroll() { 
    $(window).unbind("scroll"); 
} 

function bindScroll() { 
    $(window).scroll(function(e) { 
    setScrollTimer(); 
    borderControl(); 
    }); 
} 
bindScroll(); 

https://jsfiddle.net/sjmcpherson/Lugrukwm/

Answer 2

あなたはグローバル変数やスクロールのコールバックの外に存続少なくとも変数に結果を格納することで、あまり頻繁に処理するために、処理の結果をキャッシュできます。

私たちは改善の余地があまりありませんので、コールバックにはほとんどありません。

var navbar = $('#navbar'); 
var navborder = false; 
$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (!navborder && scroll >= 40) { 
     navborder = true; 
     navbar.addClass("navbar-border"); 
    } else if(navborder && scroll < 40) { 
     navborder = false; 
     navbar.removeClass("navbar-border"); 
    } 
}); 

http://codepen.io/t3hpwninat0r/pen/yOvaGN

別の方法としては、スクロール位置のチェックを無効にして、利用者ならば短い遅延の後

var scrollTimer = 0; 
$(window).scroll(function() { 
    clearTimeout(scrollTimer); 
    scrollTimer = setTimeout(function() { 
     var scroll = $(window).scrollTop(); 
     var navbar = $('#navbar'); 

     if (scroll >= 40) { 
     navbar.addClass("navbar-border"); 
     } else { 
     navbar.removeClass("navbar-border"); 
     } 
    }, 100); 
}); 

http://codepen.io/t3hpwninat0r/pen/BKYLMb

を再度有効にするには、タイマーを設定することができますスクロールを続行し、タイマーは再スタートし続け、機能は100msタイマーが完了したときにのみ実行されます。この例では、コードに4行しか追加しません。私が撮った

（読み：盗用）この回答からコード：https://stackoverflow.com/a/14092859/1160540