[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))

<div [style.width.%]="process$ | async" class="loading"></div>

animationFrameScheduler is built based on RequestAnimationFrame