0

I have a page where a user can enter a value into a field and it performs a search and returns it back to the user.

The problem is, if I type too fast, it is making multiple calls and sometimes skips the last character I typed and used the call before it.

I am looking into a way to throttle this and found debounce.

I don't feel like I am using this correctly though as it seems to have no impact on what I am doing.

// Component
sub: Subscription;

this.sub = this._empSearchService.employeeSearchData$
    .debounceTime(1000)
    .subscribe(
        results => {

            if (results) {
            ...
            }
        }
    );

...

// On Key Up Event
this._empSearchService.searchMultipleEmployees(data)
.then((data: any) => {
    this._empSearchService.updateSearchedEmployees(data);
});



// Service

private employeeSearchSub = new BehaviorSubject<any>(null);
employeeSearchData$ = this.employeeSearchSub.asObservable();

updateSearchedEmployees(obj) {
    this.employeeSearchSub.next(obj);
};

Any thoughts on this?

My concern is that when I enter 4 characters in under 1 second, I am seeing 4 network calls. I assume I should only see one?

enter image description here

SBB
  • 8,560
  • 30
  • 108
  • 223
  • 3
    Possible duplicate of [Angular and debounce](https://stackoverflow.com/questions/32051273/angular-and-debounce) – BlackICE Jul 25 '18 at 16:31
  • 1
    The second answer on that question sounds exactly like what you need https://stackoverflow.com/a/40777621/789529 – Mark Hughes Jul 25 '18 at 16:36
  • You are `debouncing` in the wrong place, probably `employeeSearchData$ = this.employeeSearchSub.asObservable().debounceTime(1000);` might work for you. – Castro Roy Jul 25 '18 at 21:02

0 Answers0