DebounceTime & Debounce are the Angular RxJs Operators. Both emit values from the source observable, only after a certain amount of time has elapsed since the last value. Both emit only the latest value and discard any intermediate values. In this tutorial, we will learn how to use both DebounceTime & Debounce with examples.
Table of Contents
Use Case of Debounce Operators
The typeahead/autocomplete fields are one of the most common use cases for Debounce Operators.
As the user types in the typeahead field, we need to listen to it and send an HTTP request to the back end to get a list of possible values. If we send HTTP requests for every keystroke, we end up making numerous unneeded calls to the server.
By using the Debounce Operators, we wait until the user pauses typing before sending an HTTP Request. This will eliminates unnecessary HTTP requests.
DebounceTime
The Debouncetime emits the last received value from the source observable after a specified amount of time has elapsed without any other value appearing on the source Observable
Syntax
1 2 3 | debounceTime<T>(dueTime: number, scheduler: SchedulerLike = async): MonoTypeOperatorFunction<T> |
Where dueTime The timeout duration in milliseconds.
How it works
- First, we assign a timeout duration (
dueTime) to the Debouncetime operator. - The Debouncetime operator starts counting time after it receives a value.
- If the source observable emits a value before the timeout duration, then counting is reset to zero & started again.
- When the timeout duration elapses the operator emits the last value and the counting stops.
- Counting starts again when the operators receive another value.
DebounceTime Example
The following DebounceTime example shows how to use the operator to listen for input field changes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import { Component, VERSION } from "@angular/core"; import { FormControl, FormGroup } from "@angular/forms"; import { Observable, Subscription } from "rxjs"; import { debounceTime } from "rxjs/operators"; @Component({ selector: "my-app", template: ` <form [formGroup]="mform">Name: <input formControlName="name" /></form> `, styleUrls: ["./app.component.css"] }) export class AppComponent { mform: FormGroup = new FormGroup({ name: new FormControl() }); obs:Subscription; ngOnInit() { this.obs=this.mform.valueChanges .pipe(debounceTime(500)) .subscribe(data => console.log(data)); } ngOnDestroy() { this.obs.unsubscribe(); } } |
Sending HTTP GET Request
The following example shows how you can send an HTTP GET Request using switchMap & debounceTime.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ngOnInit() { this.obs=this.mform.valueChanges .pipe( debounceTime(500), switchMap(id => { console.log(id) return this.http.get(url) }) ) .subscribe(data => console.log(data)); } |
Debounce
The Debounce operator is similar to the DebounceTime operator, but another observable will provide the time span. By Using the Debounce, we can set the time span dynamically.
Debounce Example
The following example works the same as the previous example. Instead of using the hardcoded time span, we create a new observable using the interval operator.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import { Component, VERSION } from "@angular/core"; import { FormControl, FormGroup } from "@angular/forms"; import { debounce } from "rxjs/operators"; import { interval, Subscription } from "rxjs"; @Component({ selector: "my-app", template: ` <form [formGroup]="mform">Name: <input formControlName="name" /></form> `, styleUrls: ["./app.component.css"] }) export class AppComponent { mform: FormGroup = new FormGroup({ name: new FormControl() }); obs:Subscription ngOnInit() { this.obs=this.mform.valueChanges .pipe(debounce(() => interval(500))) .subscribe(data => console.log(data)); } ngOnDestroy() { this.obs.unsubscribe() } } |
You can also customize the delay. In the following example, we increase the delay by 100ms after every keystroke.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | delay = 500; obs: Subscription; ngOnInit() { this.obs = this.mform.valueChanges .pipe( debounce(() => { this.delay = this.delay + 100; console.log(this.delay); return interval(this.delay); }) ) .subscribe(data => console.log(data)); } |
Reference
Read More