0

Here is my code (angular 2):

<button (click)="click()">GO!</button>

debouncedFunc = _.debounce(()=>{
    console.log('bam')
  }, 1000, {"leading":true})

click(){
  this.debouncedFunc()
}

this fires off every event with no debouncing. I want to only hit my endpoint max once per second and ignore all others. What am I missing? Thanks.

Dr. Cool
  • 3,713
  • 3
  • 22
  • 26
dooblr
  • 458
  • 1
  • 5
  • 18

1 Answers1

2

Figured it out 10 seconds after posting this. Funny how that works. All options needed to be declared:

 <button (click)="click()">GO!</button>

 debouncedFunc = _.debounce(()=>{
   console.log('bam')
 }, 1000, {"leading":true,"trailing":false})

 click(){
   this.debouncedFunc()
 }
dooblr
  • 458
  • 1
  • 5
  • 18
  • note that calling the debounce function directly after the lodash declaration (this would let you skip that assignment step) does **not** seem to work. I wanted to cut out a step but it seems you have to assign it first. – dooblr Dec 14 '16 at 23:25
  • You have to assign it first because debounce returns a function, and when you don't use returned function you create a new debounced function on every click – der_michael Mar 12 '20 at 22:43