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