diff --git a/pages/API/animation-frame/animation-frame.uvue b/pages/API/animation-frame/animation-frame.uvue index f9502ee74a9e30a8267b191235a0b7f8388dbbb1..2dbe25e976068a22a7b3a1731c8b392ff064cf82 100644 --- a/pages/API/animation-frame/animation-frame.uvue +++ b/pages/API/animation-frame/animation-frame.uvue @@ -3,7 +3,7 @@ - FPS: {{fps}} / {{formatFPSTime}} + FPS: {{FPSString}} FrameCount: {{testFrameCount}} 提示: 在当前测试例子中,每增加一次调用 requestAnimationFrame 帧率翻倍,cancelAnimationFrame 后恢复 @@ -14,9 +14,8 @@ data() { return { title: 'AnimationFrame', - taskId: 0, - fps: 0, - formatFPSTime: '0ms', + taskId: 0, + FPSString: '- / -ms', lastTime: 0, frameCount: 0, testFrameCount: 0 @@ -30,24 +29,25 @@ methods: { startRequestAnimationFrame() { this.taskId = requestAnimationFrame((timestamp : number) => { - this.frameCount++ - if (timestamp - this.lastTime >= 1000) { - this.formatFPSTime = (1000 / this.frameCount).toFixed(3) + 'ms' - this.fps = this.frameCount - this.frameCount = 0 - this.lastTime = timestamp - } - + this.updateFPS(timestamp) this.testFrameCount++ this.startRequestAnimationFrame() }) }, - stopRequestAnimationFrame() { - this.fps = 0 - this.formatFPSTime = '0ms' + stopRequestAnimationFrame() { + cancelAnimationFrame(this.taskId) this.lastTime = 0 - this.frameCount = 0 - cancelAnimationFrame(this.taskId) + this.frameCount = 0 + this.FPSString = '- / -ms' + }, + updateFPS(timestamp : number) { + this.frameCount++ + if (timestamp - this.lastTime >= 1000) { + const timeOfFrame = (1000 / this.frameCount) + this.FPSString = `${this.frameCount} / ${timeOfFrame.toFixed(3)}ms` + this.frameCount = 0 + this.lastTime = timestamp + } } } }