1

我使用以下代码设置了无限滚动。

$(window).scroll(function () {
    if ($(window).scrollTop() >= $("#home_content").height() - $(window).height()) {
        if (isLastPage) {
            foo();
        } else {
            bar(); // JQuery AJAX call
        }
    }
});

这是在 document.ready(); 当服务器为最后一页发送标志时，不会发生 ajax 调用。这在正常情况下工作正常。但是当我从页面底部按 F5（刷新）时，会同时触发两个滚动事件，它会绕过标志（因为第二次调用甚至在标志设置之前发生）并加载重复数据。

我唯一知道的是它发生在 document.ready() 函数的末尾。任何人，任何想法？

提前致谢。

编辑

除此之外没有太多相关的代码。

这只发生在 FF 17 中。在 IE 9 中，当我快速向下滚动时，相同的滚动被触发两次

4

2 回答 2

2

您可以将此去抖动例程用于所有类型的事件调用。清洁且可重复使用。

// action takes place here. 
function infinite_scrolling(){
    if ($(window).scrollTop() >= $("#home_content").height() - $(window).height()) {
        if (isLastPage) {
            foo();
        } else {
            bar(); // JQuery AJAX call
        }
    }
}

// debounce multiple requests
var _scheduledRequest = null;
function infinite_scroll_debouncer(callback_to_run, debounce_time) {
    debounce_time = typeof debounce_time !== 'undefined' ? debounce_time : 800;
    if (_scheduledRequest) {
        clearTimeout(_scheduledRequest);
    }
    _scheduledRequest = setTimeout(callback_to_run, debounce_time);
}

// usage
$(document).ready(function() {
    $(window).scroll(function() {
        infinite_scroll_debouncer(infinite_scrolling, 1000);
    });
});
于 2013-03-13T13:26:23.987 回答
1

这只是一种解决方法，因为我们看不到您的完整代码，但也许这会有所帮助：

var timeout;

$(window).scroll(function(){
      clearTimeout(timeout);
  timeout = setTimeout(function(){
      if  ($(window).scrollTop() >= $("#home_content").height() - $(window).height()){
                if (isLastPage){
                    foo();
                }else{
                    bar();//AJAX call
                }
            }
  },0);
});
于 2013-01-10T10:20:17.787 回答