Home Manual Reference Source Test Repository

Variable

Static Public Summary
public
this variable was deprecated. use iterator instead
public
this variable was deprecated. use observable instead
public
this variable was deprecated. use rxSubscriber instead
public

animationFrame: es6/scheduler/AnimationFrameScheduler.js~AnimationFrameScheduler

动画帧调度器

public

asap: es6/scheduler/AsapScheduler.js~AsapScheduler

Asap 调度器

public

async: es6/scheduler/AsyncScheduler.js~AsyncScheduler

Async 调度器

public

queue: es6/scheduler/QueueScheduler.js~QueueScheduler

队列调度器

Static Public

public $$iterator: * source

import {$$iterator} from '@reactivex/rxjs/es6/symbol/iterator.js'
this variable was deprecated. use iterator instead

public $$observable: * source

import {$$observable} from '@reactivex/rxjs/es6/symbol/observable.js'
this variable was deprecated. use observable instead

public $$rxSubscriber: * source

import {$$rxSubscriber} from '@reactivex/rxjs/es6/symbol/rxSubscriber.js'
this variable was deprecated. use rxSubscriber instead

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

动画帧调度器

window.requestAnimationFrame 执行的时候触发执行此任务。

animationFrame 调度器和延时一起使用, 它的行为会回退到 async 调度器。

如果没有延时, animationFrame 调度器可以被用来创建丝滑的浏览器动画。它可以保证在下一次浏览器重绘之前 调度执行任务,从而尽可能高效的执行动画。

Example:

调度 div 高度的动画
const div = document.querySelector('.some-div');

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

  this.schedule(height + 1);  // `this` 指向当前正在执行的 Action, 我们用新的状态来重新调度它
}, 0, 0);

// 你将会看到 .some-div 元素的高度一直增长

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

Asap 调度器

尽可能快的异步地执行任务

当你用它来延时任务的时候,asap 调度器的行为和 async 一样。如果你将延时时间设置为 0asap 会等待当前同步执行结束然后立刻执行当前任务。

asap 会尽全力最小化当前执行代码和开始调度任务的时间。这使得它成为执行“deferring”的最佳候选人。以前,可以通过 调用 setTimeout(deferredTask, 0) 来做到,但是这种方式仍热包含一些非期望的延时。

注意,使用 asap 调度器并不一定意味着你的任务将会在当前执行代码后第一个执行。尤其是如果之前有其他 asap 调度器的 任务,该任务会首先执行。也就是说,如果你需要异步地调用任务,但是尽可能快的执行,asap 调度器是你最好的选择。

Example:

比较 async 和 asap 调度器

Rx.Scheduler.async.schedule(() => console.log('async')); // 首先调度 'async'
Rx.Scheduler.asap.schedule(() => console.log('asap'));

// 日志:
// "asap"
// "async"
// 但是 'asap' 首先执行!

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

Async 调度器

就像你使用过的 setTimeout(task, duration) 那样调度任务

async 调度器异步地调度任务,通过将它们放入 JavaScript 事件循环中。它被认为是适时地延时任务或者 按时间间隔重复调度任务的最佳实践。

如果你只是想"延时"任务,即在当前执行同步代码结束后执行它(通常会用setTimeout(deferredTask, 0)实现), asap 调度器会是更好的选择。

Example:

使用 async 调度器来延时任务
const task = () => console.log('it works!');

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

// 2秒后的输出:
// "it works!"
使用 async 调度器按时间间隔重复执行任务
function task(state) {
  console.log(state);
  this.schedule(state + 1, 1000); // `this` 指向当前执行的 Action,
                                  // 我们用新的状态和延时来重新调度它
}

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

// 日志:
// 0 after 3s
// 1 after 4s
// 2 after 5s
// 3 after 6s

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

队列调度器

将每个任务都放到队列里,而不是立刻执行它们

queue 调度器, 当和延时一起使用的时候, 和 async 调度器行为一样。

当和延时一起使用, 它同步地调用当前任务,即调度的时候执行。然而当递归调用的时候,即在调度的任务内, 另一个任务由调度队列调度,而不是立即执行,该任务将被放在队列中,等待当前一个完成。

这意味着当你用 queue 调度程序执行任务时,你确信它会在调度程序启动之前的任何其他任务结束之前结束。

Example:

递归的重新调度自身

Rx.Scheduler.queue.schedule(function(state) {
  if (state !== 0) {
    console.log('before', state);
    this.schedule(state - 1); // `this` 指向当前执行的 Action,
                              // 我们使用新的状态重新调度
    console.log('after', state);
  }
}, 0, 3);

// 递归运行的调度器, 你的期望:
// "before", 3
// "before", 2
// "before", 1
// "after", 1
// "after", 2
// "after", 3

// 但实际使用队列的输入:
// "before", 3
// "after", 3
// "before", 2
// "after", 2
// "before", 1
// "after", 1