大家好，我是前端西瓜哥。这次来看看 PixiJS 的 Ticker 模块源码。

Ticker 的作用是在下一帧绘制前调用监听器，PixiJS 使用它来不断对画面进行重绘。

使用

在我们实例化 PIXI.Application时，PIXI.Application 内部注册的插件之一的 TickerPlugin 会被初始化：


(资料图)

Application._plugins.forEach((plugin) => {  plugin.init.call(this, options);});

将 Application 的渲染器 renderer 的 render 方法注册进去，然后每帧都会会被调用。

ticker = options.sharedTicker ? Ticker.shared : new Ticker();ticker.add(this.render, this, UPDATE_PRIORITY.LOW);

也可以直接使用：

const ticker = new PIXI.Ticker();// ticker.autoStart = true;ticker.add(() => {  console.log("前端西瓜哥");});ticker.add(() => {  console.log("fe_watermelon");});ticker.start();
目录结构

Ticker 的代码都在 packages/ticker目录下。

构造函数

看一下 Ticker 的构造函数：

class Ticker {  constructor() {    this._head = new TickerListener(null, null, Infinity);    this.deltaMS = 1 / Ticker.targetFPMS;    this.elapsedMS = 1 / Ticker.targetFPMS;    this._tick = (time: number): void => {      this._requestId = null;      if (this.started) {        // Invoke listeners now        this.update(time);        // Listener side effects may have modified ticker state.        if (this.started && this._requestId === null && this._head.next) {          this._requestId = requestAnimationFrame(this._tick);        }      }    };  }}

做了哪些事情：

（1）初始化一个空的监听器函数
this._head = new TickerListener(null, null, Infinity);

使用了链表来管理多个监听器函数，所以这个空的 this._head 就是这个链表的头部哨兵节点（虚节点）。

哨兵节点是一个链表编程技巧，目的是让真正的头部节点能和其他普通节点有一致的实现，不需要老是判断 head 是否为 null，对头节点做特殊处理，达到降低实现难度的目的。

监听器函数会被封装成一个 TickerListener 的类，提供 priority（优先级）、once（只执行一次） 等特性。其中的 next 指向下一个监听函数，确保监听器函数能够按照注册顺序依次执行。

不过 TickerListener 有个优先级的概念，监听器在加入的时候，会插入合适的位置，最终保证优先级是从高往低的。优先级类型在 UPDATE_PRIORITY 这个枚举变量中。

顺带一提，application 的 render 方法优先级是 UPDATE_PRIORITY.LOW，哨兵节点则是突破天际的 Infinity。

关于监听器函数链表的维护相关代码，其实就是双向链表的一些常规操作，本文不会过多叙述。

（2）执行监听器函数
this.update(time);

这里是执行所有监听器函数的地方。

其下的核心代码为：

while (listener){  listener = listener.emit(this.deltaTime);}

listener.emit()方法会执行当前的 listener 方法，并返回它的 next。不断循环，直到 next 为 null 结束。

（3）循环调用 this._tick 方法
this._requestId = requestAnimationFrame(this._tick);

这里用了浏览器提供的 requestAnimationFrame 方法，实现循环调用 this._tick 方法。为了方便描述，通常简写为 raf。

this.head.next表示有注册的监听函数。

结尾

Ticker 模块并不复杂的，是对 requestAnimationFrame 的一层封装，并使用链表做监听器函数的维护。

推荐内容