《TypeScript图形渲染实战：2D架构设计与实现》 —3.4 为Application类增加计时器功能

3.4  为Application类增加计时器功能

　　在Application类中使用requestAnimationFrame来驱动动画不停更新和重绘，该函数与屏幕刷新频率一致（例如16.66毫秒）的速度不停重复循环。但有时候，可能还要执行其他任务，比如每秒定时地输出一些信息，或者在某个时间点仅仅执行一次任务。像这些任务并不需要以每秒60帧的速度执行，也就是说需要既可以不同帧率来执行同一个任务，也可以倒计时方式执行一次任务。

　　要实现上述需求，可以使用HTML DOM中Window对象的setTimeout方法或setInterval方法。但是既然已经实现了Application类基于时间的更新，不如在此基础上自己来实现与setTimeout / setInterval相同的功能，这也符合本书的其中的一个定位：造轮子。

3.4.1  Timer类与TimeCallback回调函数

　　先来总结一下计时器的设计目标，主要有以下4个：

* Application类能够同时触发多个计时器。

* 每个计时器可以以不同帧率来重复执行任务。

* 每个计时器可以倒计时方式执行一次任务。

* 尽量让内存使用与运行效率达到相对平衡。

　　要实现上述4个目标，需要Timer类和Application类相互配合。下面先来看一下Timer的相关代码吧。具体代码如下：

// 回调函数类型别名

// 回调函数需要第三方实现和设置，所以导出该回调函数

export type TimerCallback = ( id : number , data : any ) => void ;

// 纯数据类

// 不需要导出Timer类，因为只是作为内部类使用

class Timer {

    public id : number = -1 ;                          //计时器的id号

    // 标记当前计时器是否有效，很重要的一个变量，具体看后续代码

    public enabled : boolean = false ; 

    public callback : TimerCallback;              //回调函数，到时间会自动调用

    public callbackData: any = undefined;    //用作回调函数的参数

    public countdown : number = 0 ;            //倒计时器，每次update时会倒计时

    public timeout : number = 0;  //

    public onlyOnce : boolean = false ;

    constructor ( callback : TimerCallback ) {

        this . callback = callback ;

    }

}

　　这里要注意的一点是：TimerCallback是export（被导出）给外部使用的，而Timer类没有。这是因为在Application类提供的公开方法都是以Timer的id号来操作Timer，因此不需要导出Timer类。

　　Timer类是纯数据类，所有的对Timer类的操作都封装在Application类中，接下来需要为Apllication类增加对Timer类的支持。