Difference between debounce time and throttle time in rxjs with example

Rxjs Operators are special type of functions that take input as an observable and then return an observable as an output that means Operators work with observable to make various kind of operations in angular or JavaScript.

In this section we are going to differentiate the debounce time and throttle time operator in rxjs, they both work pretty much similar but can make big difference in the logic.

We use rxjs operators to make application more functional like if there is no delay needed in ongoing application then the application supposed to skip that delay to perform good. so we have various operators in rxjs which we can use in angular , JavaScript and react applications so that an application can have right thing at right time.

Debounce Time

Debounce time is used to create a delay for given time span and without having source observable emission till that time.

Example

When we work on a search bar and soon as the user writes any character in it then the API get called at backend and then every time user writes character in it then we can have multiple API calls that may create bad impact on the application by hitting multiple API's on every change in search bar so..

To avoid that unnecessary API's hit we may create some delay for like 1 second or 2 second so that API could hit at right time so that the user finish writing in the search bar and delay of 1 second the API get called with complete searchable text.

searchTextChanged = new Subject<string>();
constructor(private http:Http) {}

ngOnInit(): void {
    this.subscription = this.searchTextChanged
        .debounceTime(1000)
        .distinctUntilChanged()
        .mergeMap(search => this.getValues())
        .subscribe(() => { });
}

getValues() {
    return this.http.get("https://www.example.com/search/?q="+this.q)
    .map(
      (res:Response) => {
          const studentResult = res.json();
          console.log(studentResult);
          if(studentResult.success) {
            this.results = studentResult.data;
          } else {
            this.results = [];
          }
      }
    );
}

search($event) {
    this.searchTextChanged.next($event.target.value);
}

We often use distinctUntilChanged along with debounceTime where we can only get unique values in subscription, distinctUntilChanged is used to only get unique values until the debounce time happens.

Throttle Time

Throttle Time is also used to create delay for given time span but before the delay it emits first source observable comes in its way.

Throttle time is used to ignore subscription for given time like when we want to hit an API and you need a delay for some time before that want to get the latest value emitted from source observable then Throttle Time can be used.

It seems similar to debounce Time where it is also make delay for the subscriptions but debounce Time is only emits the last value emitted in source observable and throttle Time picks the latest value emitted in the source observable.

Example

Infinite scroll with messages in chat application

where if we scroll up and find there is no more messages left in the screen then we can detect the old messages easily and make an API hit to fetch more messages so that user will not have to wait for it

@ViewChild('scroller') scroller: CdkVirtualScrollViewport;
this.scroller.elementScrolled().pipe(
      map(() => this.scroller.measureScrollOffset('bottom')),
      filter(([y1, y2]) => (y2 < y1 && y2 < 140)),
      throttleTime(200)
    ).subscribe(() => {
     this.fetchMore();
    }

Summary

In this section, we focused rxjs operator that can make our application more flexible with the time. A right time to hit an API request so that we can avoid delays for end user.