javascript - 页面滚动末尾的 jQuery 回调

Question

我有一个 div 标签，它被设置为溢出:在 css 中滚动。
我有一个回调，应该在使用它找到的元素滚动结束时调用。

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

其中 getDetails 是我正在使用的回调。它获取 div 中 span 的最后一个元素并将其作为值发送。它的所有ajax调用。问题是每次我将鼠标悬停到 div 的末尾时，getDetails 都会被调用三次。关于如何让它被调用一次有什么建议吗？

重复回调仅在我使用滚轮或按下滚动条按钮向下时发生。拖动滚动条时一切正常。

Answer 1

您应该使用 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);
       });