首页 > 解决方案 > jQuery函数在滚动时多次触发

问题描述

当用户滚动超过网站页脚顶部 100 像素时,我正在尝试加载一个功能,该功能是加载一些额外的页面内容。所以我有以下脚本:

$(window).on(‘scroll’, function () {
if ($(window).scrollTop() + $(window).height() >= $(‘#footer’).height() – 100) {
load_posts();
}
});

但是,该函数运行多次,并且使用 console.log 我发现 load_posts() 函数实际上运行一次,每个像素通过 100px,即如果我在页脚滚动 105px,它会加载 5 次,所以附加内容已加载 5 次。

如何让功能只加载一次?这样用户可以看到新内容然后继续向下滚动以加载下一个进一步的内容?也许在加载之前超时,以便第一批附加内容在第二次运行之前有时间加载,因此用户不再在页脚中?

标签: jqueryajax

解决方案


您可以使用一个小技巧来解决这个问题:它适用于我的机器。

利用:

<!DOCTYPE html>

在您的 html 顶部。


推荐阅读