javascript - 如何修复 jQuery 中的重复回调

Question

我的 jQuery 代码有问题，当我滚动到底部加载更多内容时会发生这种情况。

我的代码:

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

当我滚动超过页面的 90% 标记时，我会收到来自 MyFonction 的重复回调 - 它被调用多次。

有没有一种解决方案可以让每次滚动只进行一次回调？

Answer 1

我认为您正在寻找 debounce 和throttle 函数 - 两种类似(但不同!)的技术来控制我们允许执行函数的次数。

去抖动技术允许我们将多个连续调用“分组”为一个调用。

Throttle 技术只允许我们的函数每 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% 的情况下，您想要做一些事情而不接收任何进一步的消息通知直到下一个标记。因此，为每个标记使用一个变量，并且仅在打开该标记的变量时检查该标记的滚动。