Ember : debounce called multiple times on scroll event listener

Question

I added a debounce method inside a scroll event listener. Something like this.

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

When I do the scroll on $group the debounce is also called the same number of times the scroll event called. I don't know where is the loophole in this thing.

For example, if 5 times the scroll event printed then debounce called is also called 5 times.

This is the link for ember debounce documentation.

I don't know ember.js, but in general, debouncer is attached to the event, and the actual event handler is passed to the debouncer as an argument. — Teemu, May 31 '19 at 07:39
Can you explain to me a bit more clarification? I didn't understand your quote. — Mari Selvan, May 31 '19 at 07:41
Please take a look at [this answer](https://stackoverflow.com/a/4298672/1169519). It's not an ember.js post, but BGerrissen's answer introduces well the common base of the debouncers. I.e. `$group.on("scroll.topFix", debounce(e => {// event hander here}));`. — Teemu, May 31 '19 at 07:47

score 1 · Accepted Answer · answered Jun 01 '19 at 14:28

Your problem is that you pass an anonymous function to debounce:

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

this is problematic because you recreate this function every time when you cann debounce! So you never call debounce twice with the same function, which is necessary for it to do anything different from a setTimeout.

So you should create/save this function to somewhere and then call it like

debounce(this, this.doSomething, 1000);

Make sure you always pass exactly the same function. Just because 2 functions do the same thing does not mean its the same function instance.

score 0 · Answer 2 · answered Jun 01 '19 at 04:31

This approach is working for me...

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

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

When scroll event triggers 4 times at the same time debounce called is called only one time.

周清國 · Answer 3 · 2019-05-31T07:48:50.597

-1

<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);
})

edited May 31 '19 at 07:48

answered May 31 '19 at 07:43

周清國

14
3

I think I'm doing the same way you mentioned in your answer. When scroll starts it passes the debounce as a return. – Mari Selvan May 31 '19 at 07:49
1

This is not a debouncer, this just delays a function, and calls it as many times as the scroll handler was called. – Teemu May 31 '19 at 07:49
**From review queue**: May I request you to please add some context around your source-code. Code-only answers are difficult to understand. It will help the asker and future readers both if you can add more information in your post. – RBT May 31 '19 at 10:46

Ember : debounce called multiple times on scroll event listener

3 Answers3