我试图加载一个功能，当用户已经滚动100像素过去的网站页脚的顶部，该功能是加载一些额外的页面内容。所以我有下面的脚本:
$(window).on(‘scroll’, function () {
if ($(window).scrollTop() + $(window).height() >= $(‘#footer’).height() – 100) {
load_posts();
}
});
然而，该函数运行多次，并使用console.log我发现load_posts()函数实际上是运行一次，每一个像素通过100像素，即，如果我在页脚滚动105px它加载5次，所以额外的内容加载5次。
我如何得到函数只加载一次?以便用户可以看到新内容，然后继续向下滚动以加载下一个进一步的内容?也许在加载之前有一个超时，这样第一批附加内容在第二次运行之前就有时间加载，因此用户不再在页脚了?
通过以下操作获得此工作:
$(window).on('scroll', function(){
if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
load_posts();
}
}
});
摘自:https://silvawebdesigns.com/load-more-posts-ajax-button-in-wordpress/
你可以用一个小技巧来解决这个问题:它在我的机器上运行。
使用:
<!DOCTYPE html>
在你的html的顶部