如何修复jQuery中的重复回调

时间:2019-05-05 19:18:48

标签: javascript jquery scroll

我的jQuery代码有问题,当我滚动到底部以加载更多内容时发生。

我的代码:

$(window).scroll(function(){
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9)
{
MyFonction();
}
});

当我滚动浏览页面的90%标记时,我会从 MyFonction 获得重复的回调-多次调用。

是否有一种解决方案,使每次滚动仅进行一次回调?

1 个答案:

答案 0 :(得分:1)

我认为您正在寻找反跳和油门功能-两种相似(但不同!)的技术来控制我们允许一个功能执行多少次。

使用Debounce技术,我们可以将多个顺序调用“分组”在一个调用中。

节流技术仅允许我们的函数每X毫秒执行一次。

这里有一些很好的文章和示例:

How to change text element based on input text field in HTML using Javascript?

https://remysharp.com/2010/07/21/throttling-function-calls

https://css-tricks.com/debouncing-throttling-explained-examples/

https://davidwalsh.name/javascript-debounce-function


另一个可能更适合此查询的想法是 使用父级变量来说明您是否已滚动到90%标记之外或不。即使使用油门/去弹器,如果用户停止然后再次启动,您仍然会收到其他呼叫。

一般来说,查询.scroll()时通常会使用去抖动器,因为会生成大量事件-但在90%的情况下,您想要执行某些操作并且在下一个标记之前不会收到任何进一步的通知。因此,为每个标记使用一个变量,并且仅在打开该标记的变量时检查该标记的滚动。