CODEWITHSUNDEEP
javascriptangularlodash
michael
michael

Reputation: 4547

is there a cleaner way to debounce a method?

Is there a cleaner way to _.debounce a method using inline code? Or does it always take 3 steps?

@Component({
template: `
  <div (mousemove)="onChanged($event)">
  </div>
`
})
export class MyClass {

  @Output() somethingChanged: EventEmitter<string> = new EventEmitter<string]>();

  constructor(){}

  // 1. define method
  triggerChanged = ()=>{
    this.somethingChanged.emit("changed!");
  }

  // 2. debounce method
  debouncedTriggerChanged = _.debounce( this.triggerChanged, 500);

  onChanged(){
      // 3. call debounced method
      this.debouncedTriggerChanged()
  }
}

Upvotes: 0

Views: 198

Answers (1)

Maximilian Riegler
Maximilian Riegler

Reputation: 23506

How about this approach - leaving your suggested methods out completely:

import { fromEvent } from 'rxjs/observable/fromEvent';
import { timer } from 'rxjs/observable/timer';
import { debounce } from 'rxjs/operators';

// ...

constructor(private elementRef: ElementRef) {
    const eventStream = fromEvent(elementRef.nativeElement, 'mousemove')
                            .pipe(debounce(() => timer(500)));

    eventStream.subscribe(input => this.somethingChanged.emit("changed!"));
}

2018-06-19: Updated to current RxJS release

Upvotes: 2

Related Questions