《TypeScript图形渲染实战：2D架构设计与实现》 —3.4.4 测试Timer功能

3.4.4  测试Timer功能

　　来测试一下Timer相关功能，测试代码如下：

import { Application  } from "./src/application";

//获取canvas元素，并创建Application对象

let canvas: HTMLCanvasElement | null = document.getElementById('canvas')

as HTMLCanvasElement;

let app : Application = new Application ( canvas ) ;

// 实现一个TimerCallback签名的回调函数，打印当前Timer的id号，以及传给回调函数的

参数data

function timerCallback ( id : number , data : string ) : void {

    console . log ( "当前调用的Timer的id : " + id + " data : " + data ) ;

}

// 3秒钟后触发回调函数，仅回调一次

// addTimer后返回的id = 0

let timer0 : number = app . addTimer ( timerCallback ,3 ,true , " data

是timeCallback的数据 " ) ;

// 每5秒钟触发回调函数，回调n次

// addTimer后返回的id = 1

let timer1 : number = app . addTimer ( timerCallback , 5 ,false , " data

是timeCallback的数据 " ) ;

// 获取stop Button元素

let button : HTMLButtonElement = document . getElementById ( 'stop') as

HTMLButtonElement ;

// 当单击stop button后

button.onclick = (evt : MouseEvent ) : void => {

    // remove掉timer1计时器 ，并不实际删除id=1的计时器

    // 删除掉1号计时器，就不会有重复信息输出了

    app.removeTimer ( timer1 ) ;

    // 这时打印出来的应该是两个计时器

    console . log ( app . timers . length ) ;

    // 重用0号计时器，并且10秒后回调一次，然后删除

    let id : number = app.addTimer(timerCallback , 10 ,true , " data

    是timeCallback的数据 ");

    // 返回的应该是0号计时器，因为重用了现有的计时器

    console . log ( id === 0) ;

    // 10 秒后打印出0号计时器的相关信息，仅打印1次

}

// 一开始就启动动画循环

app . start ( ) ;

　　上述源码注释得非常详细了，主要是测试增加、删除，以及一次触发或多次触发等主要的功能。来看一下代码运行结果，如图3.17所示。

图3.17  Timer测试效果图

　　当Application启动动画循环后，console控制台输出4条消息，这些输出符合测试要求：

　　第1条是3秒后，id为0的计时器触发回调函数，该计时器是只运行一次的计时器。

　　第2条是5秒后，id为1的计时器触发回调函数，该计时器是n次触发计时器。

　　当按下stop按钮后，关闭（removeTimer）了id为1的计时器，此时该计时器触发过4次，以后不再触发。

　　当按下stop按钮后，关闭（removeTimer）了id为1计时器后，Application中的timers列表仍旧有两个timer，所以输出为2。实际上，此时timers中的计时器enabled都为false。

　　当继续addTimer一个10秒后触发一次的计时器时，它会重用id为0的计时器，因此输出id === 0 为true。

　　最后，10秒后，0号计时器被调用一次后不再触发回调。