Question

我在滚动事件侦听器中添加了一个反跳方法。像这样的东西。

$group.on("scroll.topFix",() => {
   console.log('scroll event');
   debounce(this, ()=> {
     console.log('debounce called);
   },1000);
});

当我在$group上滚动时，防抖也称为滚动事件调用的相同次数。我不知道这东西的漏洞在哪里。

例如，如果打印了 5次滚动事件，则称为“反跳” 也称为 5次。

这是ember debounce documentation.

的链接

Answer 1

这种方法对我有用...

$group.on("scroll.topFix",() => {
  console.log('scroll event');
  debounce(this, scrollfunction},1000);
});

let scrollfunction = () => {
   console.log('debounce called);
};

当scroll event同时触发4次时，debounce called仅被调用一次。

Answer 2

您的问题是您将匿名函数传递给debounce：

debounce(this, ()=> {
  console.log('debounce called);
},1000);

这是有问题的，因为您每次都无法debounce 时重新创建此函数！因此，您永远不会使用相同的函数两次调用debounce，这对于执行与setTimeout不同的操作是必要的。

因此，您应该将这个函数创建/保存到某个地方，然后像这样调用它

debounce(this, this.doSomething, 1000);

确保始终传递完全相同的函数。仅仅因为两个函数执行相同的操作，并不意味着它具有相同的函数实例。

Answer 3

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
$(window).scroll(function() {
   console.log('scroll event');
   debounce(this, ()=> {
     console.log('debounce called');
   },1000);
})

灰烬：在滚动事件侦听器上多次调用反跳

3 个答案: