javascript - 从页面底部刷新时无限滚动触发两次

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

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

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