RxJS планировщики (schedulers)

Немного о порядке выполнения кода в Event Loop:

1. Очередь синхронного кода (callstack)
2. Очередь микрозадач (Promise)
3. Очередь макрозадач (setTimeout() и setInterval() или AJAX-запросы)
4. Отдельная очередь браузера для отрисовки содержимого (requestAnimationFrame)

requestAnimationFrame(() => console.log('1 animation frame'));
setTimeout(() => console.log('2 timeout'), 0);
Promise.resolve().then(() => console.log('3 promise'));
console.log('4 sync');

// 4 sync
// 3 promise
// 1 animation frame
// 2 timeout

Список планировщиков

В RxJS есть свои "аналоги"

• queue - синхронный код
• asap - очередь микрозадач (Promise)
• async - очередь макрозадач (setTimeout)
• animationFrame - очередь для отрисовки
• virtualTime - лучше смотреть доклад

import {
  of,
  scheduled,
  merge,
  asapScheduler,
  asyncScheduler,
  queueScheduler,
  animationFrameScheduler
} from "rxjs";

const async$ = scheduled(of("async"), asyncScheduler);
const asap$ = scheduled(of("asap"), asapScheduler);
const queue$ = scheduled(of("queue"), queueScheduler);
const animationFrame$ = scheduled(
  of("animationFrame"),
  animationFrameScheduler
);

merge(async$, asap$, queue$, animationFrame$).subscribe({
  next(value) { console.log(value); }
});
console.log("after subscription");

Stackblitz

В rxjs 6.5 передача планировщика в оператор (of, from, range, ...) в качестве параметра стала deprecated.

// DEPRECATED
of('value', asapScheduler).subscribe(console.log);

• What are schedulers in RxJS
• Webdraftt Scheduler
• RxJS Schedulers form outer space – performance, animations, asynchrony | Michael Hladky
• https://github.com/BioPhoton/rxjs-schedulers