jQueryコールバックページの末尾にスクロール

Question

私はオーバーフローに設定されているdivタグを持っています：CSSのスクロール。
これを使って見つかった要素のスクロールの最後に呼び出されるコールバックがあります。

$('#details').scroll(function() { 
    if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop())) { 
     getDetails($("span:last").attr("id"), 3); 
    } 
}); 

ここでgetDetailsは、使用しているコールバックです。 div内のスパンの最後の要素をとり、それを値として送信します。そのすべてのajax呼び出し。問題はgetDetailsがdivの最後に移動するたびに3回呼び出されることです。私はそれを一度呼び出す方法についての任意の提案？

繰り返しコールバックは、スクロールホイールを使用するか、スクロールバーのボタンを押しているときにのみ発生します。スクロールバーをドラッグすると、すべてうまく動作します。

Answer 1

：ここ

は実施例です。その非常にハッキーですが...

$('#details').data("didfire", false).scroll(function() { 
    if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop())) { 
     if(!$(this).data("didfire")) { 
      getDetails($("span:last").attr("id"), 3); 

      $(this).data("didfire", true) 
      var ref = $(this); 
      setTimeout(function(){ 
       ref.data("didfire", false); 
      }, 500); 
     } 
    } 
}); 

Answer 2

setTimeout/clearTimeoutを使用して、スクロールおよびサイズ変更イベントなどの一定のフィードバックを持つイベントの処理を延期する必要があります。処理したいイベントが発生すると、意図したハンドラへの呼び出しが、適切な持続時間を持つsetTimeoutで呼び出されますが、ハンドルsetTimeoutへの参照が保持されます。今度は、同じコードを修正してこのハンドルが存在するかどうかを確認し、存在する場合はclearTimeoutとし、ハンドルを新しいsetTimeout呼び出しに更新します。私はこれをテストしていないが、これらの線に沿って何かがうまくいくかもしれないhttp://jsfiddle.net/SBgXA/

 var timeoutHandle; 

     var handler = function(e) { 
       alert('raised'); // put your code here 
       if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop()) { 
       getDetails($("span:last").attr("id"), 3); 
       } 
     } 

     $('#details').scroll(function(e) { 
      clearTimeout(timeoutHandle); 

      timeoutHandle = setTimeout(function() { 
      handler(e); 
      }, 100); 
     });