Question

我使用以下代码设置无限卷轴。

$(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中，当我快速向下滚动时，同样的滚动被触发两次

Answer 1

您可以将此debounce例程用于所有类型的事件调用。清洁和可重复使用。

// 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);
    });
});

Answer 2

这只是一种解决方法，因为我们无法看到您的完整代码，但也许这可以提供帮助：

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);
});

无限滚动从页面底部刷新两次

2 个答案: