大家好，我是前端西瓜哥。这次来看看 PixiJS 的 Ticker 模块源码。
Ticker 的作用是 在下一帧绘制前调用监听器，PixiJS 使用它来不断对画面进行重绘。
版本为 7.2.4。
使用
在我们 实例化 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 的一层封装，并使用链表做监听器函数的维护。
我是前端西瓜哥，欢迎关注我，学习更多前端知识。
