页面滚动结束时的jQuery回调

jQuery Callback on end of page scroll

本文关键字：jQuery 回调 结束 滚动      更新时间：2023-09-26

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

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

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

只有当我使用滚轮或按下滚动条按钮向下时，才会发生重复回调。拖动滚动条时一切正常

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

我没有对此进行测试，但沿着这些路线的某些东西可能会起作用。不过，这很烦人。。。

$('#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);
        }
    }  
});
相关文章：