滚动到页面底部运行function – 函数运行太多次。

我正在尝试构建一个函数，当您滚动到页面底部时，它运行一个函数来加载页面上的更多项目。

我从一个没有内容的div开始

然后我在这里发现另一个看滚动的function

 function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); console.log(docViewTop, docViewBottom, elemTop, elemBottom); return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom = docViewTop)); } $(window).scroll(function() { if(isScrolledIntoView($('#loadMore'))) { alert("reached"); return false; } }); 

一个问题是它似乎很快达到警报，而另一个主要问题是它多次警告“到达”屏幕 – 这显然很糟糕，因为我只希望该function运行一次……

然后它将加载其他内容，如果再次到达页面的底部，那么函数（例如警报）将再次运行

我是最好的方式吗？ 任何人都可以帮忙吗？

谢谢

Answer 1

使用滚动function时，您需要小心，因为每滚动一个像素都会触发一次事件。 因此，您需要使用超时仅在滚动停止时调用该函数。 试试这个：

 var timer; $(window).scroll(function () { clearTimeout(timer); timer = setTimeout(function() { if (isScrolledIntoView($('#loadMore'))) { alert("reached"); return false; } }, 50); }); 

示例小提琴

Answer 2

你应该只绑定你的函数一次。 在向页面添加新项目后，您可以检查是否有更多项目可用并再次重新绑定此function。

 var addNewContent = function () { // get new data // append new data $('#content').prepend($('
some content
')); // rebind the event, if still more data is available $('#content').one( 'endofcontent', addNewContent); }; $('#content').one("endofcontent", addNewContent); $(window,document).scroll(function() { if(isScrolledIntoView($('#loadMore'))) { $('#content').trigger("endofcontent"); return false; } }); 

测试一下： http ： //fiddle.jshell.net/d5CSd/