Angular + RxJS : delay

By Arvind Rai, February 06, 2024
On this page we will learn to use RxJS 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

RxJS delay 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) 
Parameters:
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) 
Here delay time is 2 seconds.
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 
Using RxJS 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)); 
Output
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));
   }
} 

4. Reference

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us