RxJS delay() Utility Operator

by Online Tutorials Library July 22, 2022

RxJS delay() Utility Operator

RxJS delay() operator is a utility operator used to delay the values emitted from the source observable according to a timeout given or by the specified delay value until a given Date.

In other words, you can say that the RxJS delay() operator is used to delay or time shift each item by some specified amount of milliseconds.

Syntax:

Following is the syntax of the RxJS delay() operator:

Parameter Explanation

The RxJS delay() operator generally takes up to 2 arguments.

timeout/ delay: It is used to specify the delay duration in milliseconds or a Date until the source item’s emission is delayed.
scheduler: It is used to manage the timers that handle the time-shift for each item or change the timing mechanism for emitting the values by the returned Observable. It is an optional argument. Its default value is async.

Return value

The RxJS delay() operator’s return value is observable that delays the source observable emissions by the specified timeout or Date.

Let us see some examples of the RxJS delay() operator to understand it clearly.

Example 1 (Delay for increasing durations)

  import { of, merge } from ‘rxjs’;  import { mapTo, delay } from ‘rxjs/operators’;  //emit one item  const example = of(null);  //delay output of each by a second  const message = merge(    example.pipe(mapTo(‘Hello’)),    example.pipe(mapTo(‘Guys!’), delay(100)),    example.pipe(mapTo(‘Welcome’), delay(2000)),    example.pipe(mapTo(‘to’), delay(3000)),    example.pipe(mapTo(‘TutorAspire’), delay(4000))  );  const subscribe = message.subscribe(val => console.log(val));   

Output:

After executing the above example, you will see the following result:

In the above example, you can see that every emitted value has been delayed by 1 second.

Example 2 (Delay to recognize long press)

  import { fromEvent, of } from ‘rxjs’;   import { mergeMap, delay, takeUntil } from ‘rxjs/operators’;  const mousedown$ = fromEvent(document, ‘mousedown’);  const mouseup$ = fromEvent(document, ‘mouseup’);  mousedown$.pipe(    mergeMap(event => of(event).pipe(      delay(700),      takeUntil(mouseup$)    ))  ).subscribe(event => console.log(‘Long Press!’, event));  

Index.html:

Output:

After executing the above example, you will see the following result:

In the above example, when you click on the RxJS playground for a long time (700 millisecond) , you will see the result on the console.

Next TopicRxJS Operators

RxJS delay() Utility Operator

RxJS delay() Utility Operator

Syntax:

Parameter Explanation

Return value

Example 1 (Delay for increasing durations)

Example 2 (Delay to recognize long press)

Shallow Copy vs Deep Copy in Java

Backbone.js model.urlroot()

You may also like