Variable

Animation Frame Scheduler

Perform task when window.requestAnimationFrame would fire

When animationFrame scheduler is used with delay, it will fall back to async scheduler behaviour.

Without delay, animationFrame scheduler can be used to create smooth browser animations. It makes sure scheduled task will happen just before next browser content repaint, thus performing animations as efficiently as possible.

Example:

const div = document.querySelector('.some-div');

Rx.Scheduler.schedule(function(height) {
  div.style.height = height + "px";

  this.schedule(height + 1);  // `this` references currently executing Action,
                              // which we reschedule with new state
}, 0, 0);

// You will see .some-div element growing in height

Asap Scheduler

Perform task as fast as it can be performed asynchronously

asap scheduler behaves the same as async scheduler when you use it to delay task in time. If however you set delay to 0, asap will wait for current synchronously executing code to end and then it will try to execute given task as fast as possible.

asap scheduler will do its best to minimize time between end of currently executing code and start of scheduled task. This makes it best candidate for performing so called "deferring". Traditionally this was achieved by calling setTimeout(deferredTask, 0), but that technique involves some (although minimal) unwanted delay.

Note that using asap scheduler does not necessarily mean that your task will be first to process after currently executing code. In particular, if some task was also scheduled with asap before, that task will execute first. That being said, if you need to schedule task asynchronously, but as soon as possible, asap scheduler is your best bet.

Example:

Rx.Scheduler.async.schedule(() => console.log('async')); // scheduling 'async' first...
Rx.Scheduler.asap.schedule(() => console.log('asap'));

// Logs:
// "asap"
// "async"
// ... but 'asap' goes first!

Async Scheduler

Schedule task as if you used setTimeout(task, duration)

async scheduler schedules tasks asynchronously, by putting them on the JavaScript event loop queue. It is best used to delay tasks in time or to schedule tasks repeating in intervals.

If you just want to "defer" task, that is to perform it right after currently executing synchronous code ends (commonly achieved by setTimeout(deferredTask, 0)), better choice will be the asap scheduler.

Example:

const task = () => console.log('it works!');

Rx.Scheduler.async.schedule(task, 2000);

// After 2 seconds logs:
// "it works!"

function task(state) {
  console.log(state);
  this.schedule(state + 1, 1000); // `this` references currently executing Action,
                                  // which we reschedule with new state and delay
}

Rx.Scheduler.async.schedule(task, 3000, 0);

// Logs:
// 0 after 3s
// 1 after 4s
// 2 after 5s
// 3 after 6s

Queue Scheduler

Put every next task on a queue, instead of executing it immediately

queue scheduler, when used with delay, behaves the same as async scheduler.

When used without delay, it schedules given task synchronously - executes it right when it is scheduled. However when called recursively, that is when inside the scheduled task, another task is scheduled with queue scheduler, instead of executing immediately as well, that task will be put on a queue and wait for current one to finish.

This means that when you execute task with queue scheduler, you are sure it will end before any other task scheduled with that scheduler will start.

Example:

Rx.Scheduler.queue.schedule(function(state) {
  if (state !== 0) {
    console.log('before', state);
    this.schedule(state - 1); // `this` references currently executing Action,
                              // which we reschedule with new state
    console.log('after', state);
  }
}, 0, 3);

// In scheduler that runs recursively, you would expect:
// "before", 3
// "before", 2
// "before", 1
// "after", 1
// "after", 2
// "after", 3

// But with queue it logs:
// "before", 3
// "after", 3
// "before", 2
// "after", 2
// "before", 1
// "after", 1