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

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

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

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

JS. Get query param

function getQueryParam(item) {
  var svalue = window.location.search.match(new RegExp('[\?\&]' + item + '=([^\&]*)(\&?)', 'i'));
  return svalue ? svalue[1] : svalue;
}

// /foo/bar/baz.html?lang=ru
var lang = getQueryParam('lang') || 'en';