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 - очередь микрозадач
  • async - очередь макрозадач
  • 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);

Похожие записи

Поисковый запрос с помощью RxJS

Показательная и востребованная задача. Получение набираемого запроса из поля ввода через полсекунды после того, как пользователь закончил ввод с показом лоадера.

Не ставить фокус по клику

Проблема заключалась в следующем: когда имеется интерактивный элемент с :focus стилем и вы щелкаете по этому элементу, на нём остаётся focus стиль (outline обводка). У нативной кнопки всё работает as expected, но стоит её добавить любой стиль и, как побочный эффект, меняется её поведение.