页面滚动结束时的jQuery回调答案

【问题标题】：jQuery Callback on end of page scroll页面滚动结束时的jQuery回调
【发布时间】：2012-03-18 13:03:02
【问题描述】：

我有一个设置为溢出的 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 三次。关于如何让它被调用一次的任何建议？

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

【问题讨论】：

标签： javascript jquery html callback scroll

【解决方案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);
       });

【讨论】：

您能详细说明一下吗？我对 jQuery 和 JS 很陌生。
我使用 ajax 调用来获取数据的通用处理程序。这段代码适合哪里？
我更新的答案包括您的原始代码。这个例子应该可以解决问题。

【解决方案2】：

我没有对此进行测试，但类似的方法可能会起作用。虽然它很hacky...

$('#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);
        }
    }  
});

【讨论】：