From 14efaf3662fb6cdf4b441934a29e3971e992816b Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Thu, 8 Aug 2024 19:00:35 +0800
Subject: [PATCH] =?UTF-8?q?AnimationFrame:=20=E4=BC=98=E5=8C=96=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E9=A1=B5=E9=9D=A2=E7=AD=96=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../API/animation-frame/animation-frame.uvue  | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/pages/API/animation-frame/animation-frame.uvue b/pages/API/animation-frame/animation-frame.uvue
index f9502ee7..2dbe25e9 100644
--- a/pages/API/animation-frame/animation-frame.uvue
+++ b/pages/API/animation-frame/animation-frame.uvue
@@ -3,7 +3,7 @@
     <page-head :title="title"></page-head>
     <button @click="startRequestAnimationFrame">requestAnimationFrame</button>
     <button @click="stopRequestAnimationFrame">cancelAnimationFrame</button>
-    <text class="frame-count">FPS: {{fps}} / {{formatFPSTime}}</text>
+    <text class="frame-count">FPS: {{FPSString}}</text>
     <text class="frame-count">FrameCount: {{testFrameCount}}</text>
     <text class="tips">提示: 在当前测试例子中，每增加一次调用 requestAnimationFrame 帧率翻倍，cancelAnimationFrame 后恢复</text>
   </view>
@@ -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
+        }
       }
     }
   }
-- 
GitLab