.resizeと.scrollメソッドの呼び出し回数を減らす

Question

次のコードを使用して、閲覧者が閲覧しているページの一部（Googleブックなど、閲覧中のページを見つける）を見つけます。

$("#main-content").scroll(function() { 
      Nx.curPage = (Math.round($(this).scrollTop()/620)+1); 
      window.location.hash = "#"+Nx.curPage; 
      Nx.select(undefined); 
     }); 

また別の部分では、コンテンツを現在のウィンドウサイズに合わせるために、$(window).resize(...)を使用します。これは、すべての単一サイズ変更で呼び出されます。あなたが想像することができるように、これはページの速度を遅くします。特に、古いハードウェアではそうです。スクロールやリサイズが停止した後、処理を開始するときに実現する方法はありますか？そのため、プロセスの数は減りますか？ $("#main-content").scrollStopのようなもの???

Answer 1

あなたは2つのことができます。

var timeout; 
$("#main-content").scroll(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function(){ 
     Nx.curPage = (Math.round($(this).scrollTop()/620)+1); 
     window.location.hash = "#"+Nx.curPage; 
     Nx.select(); // note: undefined is passed by default 
    }, 200); 
}); 

2）リミットコール数/秒：

var lastScroll = 0; 
$("#main-content").scroll(function() { 
    var now = +new Date; 
    if (now - lastScroll > 100) { // only execute if (elapsed > 100ms) 
    Nx.curPage = (Math.round($(this).scrollTop()/620)+1); 
    window.location.hash = "#"+Nx.curPage; 
    Nx.select(); 
    lastScroll = now; 
    }   
}); 

そのリサイズ/スクロールのみいくつかのアイドル状態の後に起こるよう

1）はタイムアウトを設定します

Answer 2

下記の機能をお試しください。ユーザーが特定の番号をスクロールしたかどうかを確認します。ただし、スクロール中に連続して設定されるのではなく、設定された間隔（以下の例では5秒）で起動されます。

var scrollCheck; 

    $(window).on('scroll', function() { 
     clearInterval(scrollCheck); 
     scrollCheck = setInterval(function(){ 
      clearInterval(scrollCheck); 
      scrollPosition = $(this).scrollTop(); 
          scrollAmount = 150 // no. of pixels that have been scrolled from top 

      if(scrollPosition > scrollAmount){ 
       alert('scrolled past point') 
      }else{ 
       alert('not scrolled past point') 
      } 

     },200); 
    });