[RxJS] Execution Contexts and Scheduler


There are two async exection context:

  • Microtask Queue - ASAP (Promises, MutationObserver)
  • Macrotask Queue - DO Later (setTimeout, setInterval, requestAnimationFrame)

Microtsk run before Macrotask.

RxJS has Schedulers run can modify the exection context:

of("micro").pipe(observeOn(asapScheduler)).subscribe() // Microtask
of("marco").pipe(observeOn(asyncScheduler)).subscribe() // Macrotask

Rarely need to directly using those scheduler.

It might be useful for progress bar with animation:

this.process$ = interval(0, animationFrameScheduler).pipe(take(100))

"process$ | async" class="loading">
animationFrameScheduler is built based on RequestAnimationFrame