How can i implement debouncing with rxjs?

Question

I want to implement debouncing.

Vanilla java script code will look like this

onInputChange(ev) {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(users => console.log('users', users));
    },700)
  }

but i can't find a way to do the same with rxjs in my angular compomonent

i tried

i found the debounceTime operator but it still makes requests every time. There is no delay of 1000 miliseconds

this.http.get('https://jsonplaceholder.typicode.com/users')
    .pipe(debounceTime(1000))
    .subscribe(users => console.log('users', users));

Also i tried

<input [(ngModel)]="newUser" (input)="onInputChange($event)" [formControl]="newUserControll"/>

   this.newUserControll.valueChanges.pipe(
    debounceTime(1000)
    switchMap(() => interval(1000))).subscribe(x => console.log('x', x))

but i get

',' expected. error

Do you actually have a reactive input available? Because that is the thing that needs debouncing. The way you have it now won’t work really.. you’ve already made the http call.. — MikeOne, Jun 25 '21 at 13:47
Yes i have formControl binded, i wanted to prevent calling http requests on every key type in the input... How can i do that after i binded to valueChanges on the formControll ? — peco123, Jun 25 '21 at 13:50
@MikeOne i edited my question. Can you please see it and tell my where is my mistake ? — peco123, Jun 25 '21 at 13:56
Not sure what the interval does in there. Found this: https://stackoverflow.com/questions/35991867/angular-2-using-observable-debounce-with-http-get — MikeOne, Jun 25 '21 at 13:59
I don't see any sense in using ngModel with reactive forms control. You have to use either or. — Devang Patel, Jun 25 '21 at 14:08

score 0 · Answer 1 · answered Jun 25 '21 at 14:11

here is sample code implementing debounceTime

Sample stackblitz - https://stackblitz.com/edit/angular-ivy-tsqwh9?file=src/app/app.component.ts

this.searchControl.valueChanges
  .pipe(
    debounceTime(2000),
    switchMap(searchTerm => {
      //Make Api call here
      console.log(searchTerm);
      return searchTerm; // Remove this code after implenting api call - This is only temporary line
      return; // return result of api call here
    })
  )
  .subscribe(result => {
    // Final api response
  });

score 0 · Answer 2 · answered Jun 27 '21 at 06:55

As others have mentioned, your problem is that you are placing debounce after the http call. You must debounce before your http call.

Incorrect Flow:

value changes -> http call -> debounce

Correct Flow:

value changes -> debounce -> http call

The correct way to use switchMap is like this:

  data$ = this.newUserControl.valueChanges.pipe(
    debounceTime(1000),
    switchMap(userInfo => this.http.get(...))
  );

Here's a sample StackBlitz demo that you can play with.

score -1 · Answer 3 · answered Jun 25 '21 at 13:46

-1

Let's say on change of input you want to call an API with some debounceTime. In your HTML you need to bind that property to get search text as below. If you see an error related to ngModel then make sure you have this imported:

import { FormsModule } from '@angular/forms';

<input placeholder="Search" [(ngModel)]="searchBy"(ngModelChange)="changed.next()" name="searchBy">

In your .ts file:

public searchBy = '';
public changed = new Subject<string>();

ngOnInit() {
   this.changed.debounceTime(300).subscribe(() => {
       this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(users => {
         console.log('users', users))
       });
   });
}

answered Jun 25 '21 at 13:46

Devang Patel

1,795
4
21

@Debang - i get Property 'debounceTime' does not exist on type 'Subject' error when i try your code – peco123 Jun 25 '21 at 13:51
And why i need to use subject in this case ? Is it not possible only with fomrControll valueChanges ? – peco123 Jun 25 '21 at 13:53
Maybe you are using another version of Angular from what I provided. Then you have to add debounceTime this way: this.changed.pipe(debounceTime(300)) – Devang Patel Jun 25 '21 at 14:02

How can i implement debouncing with rxjs?

3 Answers3