关于javascript:RxJS源码解析六Scheduler

4次阅读

共计 9943 个字符，预计需要花费 25 分钟才能阅读完成。

DevUI 是一支兼具设计视角和工程视角的团队，服务于华为云 DevCloud 平台和华为外部数个中后盾零碎，服务于设计师和前端工程师。
官方网站：[devui.design
](https://devui.design/)Ng 组件库：ng-devui（欢送 Star）
官网交换群：增加 DevUI 小助手（微信号：devui-official）
DevUIHelper 插件：DevUIHelper-LSP（欢送 Star）

在这之前，我始终都没有讲过 Scheduler 的作用，那么本章就开始解说 Scheduler 的设计思路和根本构造。RxJS 的存在是为了解决异步 IO，而异步 IO 所蕴含的一系列 API 必定也是要通过进一步的封装能力让 RxJS 中的异步操作应用。

能够看到，它次要还是依据 JS 的所可能提供的异步能力来设计这些根本构造。

AsyncScheduler：异步调度器，应用 setInterval 实现。
QueueScheduler：队列异步调度器，继承了 AsyncScheduler，然而 QueueAction 是一种链式构造，使得调度以迭代器的模式进行。
AnimationFrameScheduler：应用 reqeustAnimationFrame 实现了帧调度器。
AsapScheduler：应用 Promise.resolve().then() 实现的微任务调度器。

首先，SchedulerLike 提供了以下两个接口。

export interface SchedulerLike {
  // 标记以后工夫
  now(): number;


  // 开启调度的根底接口
  schedule<T>(work: (this: SchedulerAction<T>, state?: T) => void,
    delay?: number,
    state?: T
  ): Subscription;
}

Scheduler 则实现了这些接口。

export class Scheduler implements SchedulerLike {


  // 获取以后工夫戳
  public static now: () => number = () => Date.now();


  constructor(
    private SchedulerAction: typeof Action,
    now: () => number = Scheduler.now) {this.now = now;}


  public now: () => number;
  // 间接调用 action 的 schedule
  public schedule<T>(work: (this: SchedulerAction<T>, state?: T) => void, delay: number = 0, state?: T): Subscription {return new this.SchedulerAction<T>(this, work).schedule(state, delay);
  }
}

Scheduler 为后续的继承它的调度器定义了创立形式，通过传入一个 Action 工厂，使得外部能够结构特定的 Action。而 Action 继承了 Subscription，意味着 Action 实际上是一种的订阅器。

export class Action<T> extends Subscription {constructor(scheduler: Scheduler, work: (this: SchedulerAction<T>, state?: T) => void) {super();
  }
  // Action 开始调度
  public schedule(state?: T, delay: number = 0): Subscription {return this;}
}

下面的设计是一种名为 Template Method 的设计模式，这种办法无效地束缚了后续的不同的 Scheduler 的实现。

定义一个操作中的算法的骨架，而将一些步骤提早到子类中。它使得子类能够不扭转一个算法的构造即可重定义该算法的某些特定步骤。

先来理解一下 Scheduler 的子类 AsyncScheduler，余下所有的 Scheduler 都会继承它。在这里，先不急着进行源码剖析，咱们须要先为了弄清楚调度器的运行原理，理解调度器是如何对异步 API 进行封装的。

首先，调度器自身也是基于观察者模式来进行设计，然而它又独立于 Rxjs 的 Observable。一般来说，AsyncScheduler 是这样调用的。

const scheduler = AsyncScheduler(AsyncAction);
const subscription = async.schedule(function (counter) {console.log(counter);
    // this 绑定了 AsyncAction
    this.schedule(counter + 1, 1000);
}, 1000, 1);


// subscription.unsubscribe();

它的调用栈是这样的。

AsyncScheduler.schedule
AsyncAction.schedule
AsyncAction.requestAsyncId
listOnTimeout // 原生事件
processTimers // 原生事件
AsyncScheduler.flush
AsyncAction.execute
AsyncAction.\_execute
AsyncAction.work

跟着调用栈剖析源码来溯源，在 AsyncScheduler 的 schedule 办法中，它先结构了 AsyncAction，而后调用它的 schedule。在这个办法中，实际上是对 Action 的外部状态进行更新，所以此处关注的中央就是在于 schedule 如何触发异步 API。

class AsyncAction<T> extends Action<T> {
  constructor(
    protected scheduler: AsyncScheduler,
    protected work: (this: SchedulerAction<T>, state?: T) => void
  ) {super(scheduler, work);
  }


  public schedule(state?: T, delay: number = 0): Subscription {if (this.closed) {return this;}
    this.state = state;
    const id = this.id;
    const scheduler = this.scheduler;
    // 须要对相应的异步 API 进行勾销操作
    if (id != null) {this.id = this.recycleAsyncId(scheduler, id, delay);
    }
    this.pending = true;
    this.delay = delay;
    // 重新配置异步 API
    this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);


    return this;
  }
}

能够看到，从 scheduler 传入的回调函数最终会被 Action 持有，所以调用栈最终执行的 work 实际上就是回调函数。

requestAsyncId 是调用异步 API 的办法，这个办法在 AsyncAction 最终触发了 setInterval 这一异步 API。那么实际上，依据 Template Method 的设计，所有继承 AsyncAction 的 Action 都会通过这个办法实现绝对应的异步 API。

至于 AsyncAction 为什么会应用 setInterval 而不是 setTimeout，源代码里是这样阐明的。

Actions only execute once by default, unless rescheduled from within the scheduled callback. This allows us to implement single and repeat actions via the same code path, without adding API surface area, as well as mimic traditional recursion but across asynchronous boundaries. However, JS runtimes and timers distinguish between intervals achieved by serial setTimeout calls vs. a single setInterval call. An interval of serial setTimeout calls can be individufenally delayed, which delays scheduling the next setTimeout, and so on. setInterval attempts to guarantee the interval callback will be invoked more precisely to the interval period, regardless of load. Therefore, we use setInterval to schedule single and repeat actions. If the action reschedules itself with the same delay, the interval is not canceled. If the action doesn’t reschedule, or reschedules with a different delay, the interval will be canceled after scheduled callback execution.

对于某一个 Action 来说，除非它在调度的回调中被从新调度，那么它默认只会执行一次。这样的形式能够使得咱们通过对立的代码实现调度繁多或反复的 Actions，而无需增加 API，并且能够模拟传统递归来扩大异步。然而，JS 的运行时或者计时器别离通过串行的 setTimout 或者是单个 setInterval 来获取调用的定时器。串行的 setTimout 定时器能够独自提早，这样做会提早 c 下一个 setTimout 的调度，以此类推。而 setInterval 则不论程序运行的负载如何，它总是尝试去确保每一次定时器的回调更加精准的安顿到适合的间隔时间。因而，咱们应用 setInterval 来安顿繁多或反复的 Actions，如果 action 以雷同的时延调度自身，那么以后定时器不会被勾销。如果 action 只没有从新调度或者以不同的时延从新调度，则安顿的回调执行后，改定时器会被勾销。

class AsyncAction<T> extends Action<T> {
  protected requestAsyncId(
    scheduler: AsyncScheduler,
    id?: any,
    delay: number = 0
  ): any {
    // 绑定 scheduler，并且把以后的 AsyncAction 当作参数传入。return setInterval(scheduler.flush.bind(scheduler, this), delay);
  }
}

所以，在 AsyncScheduler 中，新增的 flush 办法实际上是为 setInterval 服务的，它作为异步 API 的回调函数，次要步骤如下。

如果存在运行中的 Action，它会保留所用调用它的 Action。
如果不存在运行中的 Action，它会执行所有调用队列中的 Action.execute
解决 Action.execute 的运行谬误。

export class AsyncScheduler extends Scheduler {public flush(action: AsyncAction<any>): void {const {actions} = this;


    if (this.active) {
      // 应用了一个队列保留所有输出的 Actions
      actions.push(action);
      return;
    }


    let error: any;
    this.active = true;
    // 默认 action 也是队列中的一员
    // 将所有队列中的 Action 进行调用。do {if (error = action.execute(action.state, action.delay)) {break;}
    } while (action = actions.shift());


    this.active = false;


    // 呈现谬误时，勾销所有未运行 action 的订阅
    if (error) {
      // 留神，此处不会反复勾销订阅，因为执行谬误的 Action 会先退出队列，再执行循环。while (action = actions.shift()) {action.unsubscribe();
      }
      throw error;
    }
  }
}

上述的 flush 调用了 action 的 execute 办法。该办法也是通过解决 action 的外部状态来取得执行后果，其中会调用 _execute 这一外部办法，这个外部办法次要作用是调用 AsyncAction.work，并解决它呈现的异样。

class AsyncAction<T> extends Action<T> {public execute(state: T, delay: number): any {if (this.closed) {return new Error('executing a cancelled action');
    }
    this.pending = false;
    // 获取异样谬误
    const error = this.\_execute(state, delay);
    if (error) {return error;} else if (this.pending === false && this.id != null) {this.id = this.recycleAsyncId(this.scheduler, this.id, null);
    }
  }


  protected \_execute(state: T, delay: number): any {
    let errored: boolean = false;
    let errorValue: any = undefined;
    try {
      // work
      this.work(state);
    } catch (e) {
      errored = true;
      errorValue = !!e && e || new Error(e);
    }
    if (errored) {this.unsubscribe();
      return errorValue;
    }
  }
}

在剖析到 Action.schedule 的时候，援用了源码外部的正文，其中有一句话很重要，那就是 “如果 action 以雷同的时延调度自身，那么以后定时器不会被勾销”，所以 recycleAsyncId 这个办法是须要解决这种状况。

class AsyncAction<T> extends Action<T> {protected recycleAsyncId(scheduler: AsyncScheduler, id: any, delay: number = 0): any {
    // this.delay === delay 解决了这种状况。if (delay !== null && this.delay === delay && this.pending === false) {return id;}
    // 勾销以后的定时器
    clearInterval(id);
    return undefined;
  }
}

AsyncScheduler 能够说曾经把所有的地基都打好了，它能够间接拿来用，也能够继承并重写一些相干的接口把相应的异步 API 进行替换。

队列调度器依据调用者传入的时延来决定应用同步形式的调度还是 setInterval 形式的调度。

QueueScheduler 单纯继承了 AsyncScheduler，其次要实现在 QueueAction 中，通过重写 schedule、execute 以及 requestAsyncId 等办法来实现这种性能。

export class QueueAction<T> extends AsyncAction<T> {public schedule(state?: T, delay: number = 0): Subscription {
    // delay > 0，执行异步调度
    if (delay > 0) {return super.schedule(state, delay);
    }
    this.delay = delay;
    this.state = state;
    // 否则间接执行同步调度
    this.scheduler.flush(this);
    return this;
  }


  public execute(state: T, delay: number): any {
    // 依据传入的 delay 判断是否间接执行 work（同步执行）return (delay > 0 || this.closed) ?
      super.execute(state, delay) :
      this.\_execute(state, delay) ;
  }


  protected requestAsyncId(scheduler: QueueScheduler, id?: any, delay: number = 0): any {
    // 依据传入的 delay 以及自身的 delay 来决定是否应用异步
    if ((delay !== null && delay > 0) || (delay === null && this.delay > 0)) {return super.requestAsyncId(scheduler, id, delay);
    }
    // delay 为 0，间接同步调度
    return scheduler.flush(this);
  }
}

帧调度器依据调用者传入的时延来决定应用 requestAnimationFrame 还是 setInterval，微任务调度器则是依据时延来决定应用 Promise.reslove().then() 还是 setInterval。

两者的调用相似，以至于能够联合起来剖析。

它们的 action 办法均重写了 requestAsyncId 和 recycleAsyncId，次要还是为了解决不同异步 API。

protected requestAsyncId(scheduler: AnimationFrameScheduler, id?: any, delay: number = 0): any {if (delay !== null && delay > 0) {return super.requestAsyncId(scheduler, id, delay);
  }
  // 把以后 action 退出到 actions 队列末端
  scheduler.actions.push(this);


  if (!scheduler.scheduled) {
      // AsapAction 的状况
      const scheduled = Immediate.setImmediate(scheduler.flush.bind(scheduler, null));


      // AnimationFrameAction 的状况
      const scheduled = requestAnimationFrame(scheduler.flush.bind(scheduler, null));


      scheduler.scheduled = scheduled;
  }
  return scheduler.scheduled;
}


protected recycleAsyncId(scheduler: AnimationFrameScheduler, id?: any, delay: number = 0): any {if ((delay !== null && delay > 0) || (delay === null && this.delay > 0)) {return super.recycleAsyncId(scheduler, id, delay);
  }
  if (scheduler.actions.length === 0) {
    // AsapAction
    Immediate.clearImmediate(id);
    // AnimationFrameAction
    cancelAnimationFrame(id);


    scheduler.scheduled = undefined;
  }
  return undefined;
}

它们的 flush，跟 AsyncScheduler 的 flush 实现思路差不多，仍旧是轮询 actions 队列调用 action.execute，只是它们的 flush 须要去解决额定的以下细节。

action 传入可能为空。
解决 actions 的状态。
清空 scheduled，使得 scheduler 可能进行下一次调度。

// export class AnimationFrameScheduler extends AsyncScheduler {
export class AsapScheduler extends AsyncScheduler {public flush(action?: AsyncAction<any>): void {
    this.active = true;
    this.scheduled = undefined;


    const {actions} = this;
    let error: any;
    let index: number = -1;
    // 此处程序不能打乱，因为这样
    action = action || actions.shift()!;
    let count: number = actions.length;


    do {if (error = action.execute(action.state, action.delay)) {break;}
    } while (++index < count && (action = actions.shift()));


    this.active = false;


    if (error) {while (++index < count && (action = actions.shift())) {action.unsubscribe();
      }
      throw error;
    }
  }
}

这里很有意思的一点，AsapScheduler 并没有间接通过 Promise.reslove().then() 来实现。而是把它封装成 Immediate，造成 setImmediate 和 clearImmediate 两个 API，这样就使得微工作的调用其余的定时 API 无异。

外部实现是通过一个 Map 保留标记以后的是第几个微工作，这里并不间接保留 Promise，因为 Promise 执行结束后就自行开释了，所以它须要的只是一个标记。

let nextHandle = 1;
const RESOLVED = (() => Promise.resolve())();
const activeHandles: {\[key: number\]: any } = {};


function findAndClearHandle(handle: number): boolean {if (handle in activeHandles) {delete activeHandles\[handle\];
    return true;
  }
  return false;
}


export const Immediate = {setImmediate(cb: () => void): number {
    const handle = nextHandle++;
    activeHandles\[handle\] = true;
    RESOLVED.then(() => findAndClearHandle(handle) && cb());
    return handle;
  },


  clearImmediate(handle: number): void {findAndClearHandle(handle);
  },
};

本篇剖析了 RxJS 的调度器相干的一系列内容，通过封装 JS 异步 API，调度器实现绝对应的异步性能，加强了 RxJS 对异步 IO 的掌控。

咱们是 DevUI 团队，欢送来这里和咱们一起打造优雅高效的人机设计 / 研发体系。招聘邮箱：muyang2@huawei.com。

作者：zcx（公众号：Coder 写字的中央）

原文链接：https://mp.weixin.qq.com/s/vG0aaQmDy7Cqfv0CwJ_d0Q

往期文章举荐

《RxJS 源码解析（五）—— Operator III》

《Web 界面深色模式和主题化开发》

《手把手教你搭建一个灰度公布环境》

正文完

javascript

发表至： javascript

2020-08-31

0

关于javascript:一文搞清JSESTS的关系

很多人不知道-vfor-可以这样解构

关于javascript:如何使用Promiserace-和-Promiseany

Shadow DOM 内部构造及如何构建独立组件

关于前端:vivo-悟空活动中台-栅格布局方案

关于javascript:RxJS源码解析六Scheduler

引言

SchedulerLike、Scheduler & Action

异步调度器

AsyncAction.schedule

AsyncAction.requestAsyncId

AsyncScheduler.flush

AsyncAction.execute

AsyncAction.recycleAsyncId

使用 Template Method

队列调度器

帧调度器与微任务调度器

Action

Scheduler

Immediate

总结

退出咱们

站内搜索

关于javascript:RxJS源码解析六Scheduler

引言

SchedulerLike、Scheduler & Action

异步调度器

AsyncAction.schedule

AsyncAction.requestAsyncId

AsyncScheduler.flush

AsyncAction.execute

AsyncAction.recycleAsyncId

使用 Template Method

队列调度器

帧调度器 与 微任务调度器

Action

Scheduler

Immediate

总结

退出咱们

站内搜索

帧调度器与微任务调度器