RxJS observeOn() Utility Operator

RxJS observeOn() operator is a utility operator based on the input scheduler and re-emit all notifications from the source observable with a specified scheduler. It is used to ensure that a specific scheduler is used from outside of an observable.

Syntax:

Following is the syntax of the RxJS observeOn() utility operator:

observeOn<T>(scheduler: SchedulerLike, delay: number = 0): MonoTypeOperatorFunction<T>

Parameter Explanation

scheduler: The scheduler argument is used to reschedule notifications from the source Observable and used as an input to re-emit the notifications from the source observable.
delay: This argument is used to specify the delay in milliseconds stating what delay every notification should be rescheduled. This is an optional argument. Its default value is 0.

Return value

The RxJS observeOn() operator's return value is observable that emits the same notifications as the source observable but with a provided scheduler.

Let us see an example of the RxJS observeOn() operator to understand it clearly.

Example

import { interval } from 'rxjs';
import { observeOn } from 'rxjs/operators';
import { animationFrameScheduler } from 'rxjs';
let testDiv = document.getElementById("test");
const intervals = interval(100);
let case1 = intervals.pipe(
   observeOn(animationFrameScheduler),
);
let sub1 = case1.subscribe(val => {
   console.log(val);
});

Output:

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