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

我有一个无限滚动设置与下面的代码。

$(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

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

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

Answer 2

您可以将此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); }); });