RxJS delayWhen() Utility Operator

RxJS delayWhen() operator is a utility operator used to delay the values emitted from the source Observable by a given time span determined by the emissions of another observable.

It is like the RxJS delay() operator, but the time span of the delay duration is determined by a second Observable.

Syntax:

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

Or

Parameter Explanation

• timeoutSelector_func: It is used to specify an observable that decides about the timeout.
• delayDurationSelector: It is a function that is used to return an observable for each value emitted by the source observable. Later, it is used to delay the emission of that item on the output observable until the observable returned from this function emits a value.
• subscriptionDelay: It specifies an observable that triggers the subscription to the source observable when it emits a value. It is an optional argument. Its default is undefined.

Return value

The RxJS delayWhen() operator returns an observable that delays the emitted values by an amount of time specified by the delayDurationSelector.

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

Example 1 (Delay based on observable)

Output:

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

In the above example, you can see that The RxJS delayWhen() operator has started emitting delayed interval values after the initial 5 seconds delay.

Example 2 (Delay the emitted value by a random amount of time)

Output:

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

In the above example, you can see that The RxJS delayWhen() operator has delayed each click by a random amount of time, between 0 and 5 seconds.