Angular + RxJS : delay
February 06, 2024
delay operator in our Angular application. RxJS delay operator delays the emission of source observable for the given time span. We can use delay to delay HTTP response or any other operation. We can also use delay in testing.
Now let us discuss
delay operator in detail with examples.
1. RxJS delay
RxJSdelay operator delays the emission of source observable by given due time. The time can be a number in milliseconds or Date.
Find the
delay operator construct.
delay(due: number | Date, scheduler)
due : Time in milliseconds or as Date. Delay duration after which source observable will start emission.
scheduler : Optional. Manages the timers. Default is
asyncScheduler.
Returns:
Returns an observable that delays the emission of source observable for given time span.
1. When the due time is a number in milliseconds passed to
delay operator, the source observable starts emitting after the specified milliseconds are passed.
2. When the due time is a Date, source observable starts emitting after the given date occurs.
3. The scheduler argument is optional. Its values can be
asyncScheduler, asapScheduler or custom scheduler using SchedulerLike. The delay operator uses asyncScheduler by default.
4. To use
delay operator with asapScheduler, use code as below.
delay(2000, asapScheduler)
4. The difference between
asyncScheduler and asapScheduler is that when we use asyncScheduler it schedules tasks asynchronously as if it is setTimeout(task, duration) and when we use asapScheduler, it also performs task asynchronously but waits for current synchronously executing task to end and then performs task as soon as possible.
2. Using delay
Example-1: Using delay time as number in milliseconds.Find the simple code with
delay operator.
const dueTime = 5000; // 5 milliseconds
of("A", "B", "C").pipe(
tap(se => console.log("Delay for " + se + " is " + dueTime + "ms")),
delay(2000)
).subscribe(v => console.log(v));
delay operator returns observable for every value of source observable with 5 seconds delay time. It means all the values of source observable will be emitted after 5 seconds in one go. We can see in console that after 5 seconds, all the values of source are emitted in one go with the order they are in source.
Find the output.
Delay for A is 5000ms Delay for B is 5000ms Delay for C is 5000ms (after 5 seconds) A B C
delayWhen operator, we can assign different delay time for each value of source observable.
Example-2: Use delay time as
Date
We can delay a task until a future date happens.
const futureDate = new Date("2030-03-25");
of("Mohit", "Shiva").pipe(
delay(futureDate)
).subscribe(v => console.log(v));
Example-3: Emitting each value with a given delay.
of("X1", "X2", "X3").pipe(
concatMap(e => of(e).pipe(
delay(2000),
map(v => v + " displaying after 2 seconds.")
))
).subscribe(res => console.log(res));
X1 displaying after 2 seconds. X2 displaying after 2 seconds. X3 displaying after 2 seconds.
3. delay with HTTP Request
import { HttpClient, HttpParams } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { concatMap, delay, of } from 'rxjs';
@Component({
selector: 'my-app',
standalone: true,
template: 'RxJS Delay Demo'
})
export class EmpComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
of(10, 11).pipe(
concatMap(id => this.http.get<any[]>("/api/getEmpById", {
params: new HttpParams().set('id', id)
}).pipe(
delay(1000)
))
).subscribe(res => console.log(res));
}
}
