Home Manual Reference Source Test Repository

Variable

Static Public Summary
public

animationFrame: es6/scheduler/AnimationFrameScheduler.js~AnimationFrameScheduler

Animation Frame Scheduler

public

asap: es6/scheduler/AsapScheduler.js~AsapScheduler

Asap Scheduler

public

async: es6/scheduler/AsyncScheduler.js~AsyncScheduler

Async Scheduler

public

queue: es6/scheduler/QueueScheduler.js~QueueScheduler

Queue Scheduler

public

root: *

window: browser in DOM main thread self: browser in WebWorker global: Node.js/other

Static Public

public animationFrame: es6/scheduler/AnimationFrameScheduler.js~AnimationFrameScheduler source

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:

Schedule div height animation
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

public asap: es6/scheduler/AsapScheduler.js~AsapScheduler source

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:

Compare async and asap scheduler

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

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

public async: es6/scheduler/AsyncScheduler.js~AsyncScheduler source

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:

Use async scheduler to delay task
const task = () => console.log('it works!');

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

// After 2 seconds logs:
// "it works!"
Use async scheduler to repeat task in intervals
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

public queue: es6/scheduler/QueueScheduler.js~QueueScheduler source

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:

Reschedule itself recursively

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

public root: * source

window: browser in DOM main thread self: browser in WebWorker global: Node.js/other

Test: