From cf1856723ef585cb3867bec15532edcfe3241503 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Thu, 8 Aug 2024 15:44:57 +0800
Subject: [PATCH] =?UTF-8?q?cancelAnimationFrame:=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=B8=A7=E7=8E=87=E8=AE=A1=E7=AE=97=E5=B9=B6=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cancel-animation-frame.uvue               | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/pages/API/cancel-animation-frame/cancel-animation-frame.uvue b/pages/API/cancel-animation-frame/cancel-animation-frame.uvue
index 2f0062c5..074f46c7 100644
--- a/pages/API/cancel-animation-frame/cancel-animation-frame.uvue
+++ b/pages/API/cancel-animation-frame/cancel-animation-frame.uvue
@@ -3,7 +3,9 @@
     <page-head :title="title"></page-head>
     <button @click="startRequestAnimationFrame">requestAnimationFrame</button>
     <button @click="stopRequestAnimationFrame">cancelAnimationFrame</button>
-    <text class="frame-count">{{testFrameCount}}</text>
+    <text class="frame-count">FPS: {{fps}}</text>
+    <text class="frame-count">FrameCount: {{testFrameCount}}</text>
+    <text class="tips">提示: 在当前测试例子中，调用一次 requestAnimationFrame 帧率翻倍，cancelAnimationFrame 后恢复</text>
   </view>
 </template>
 
@@ -13,6 +15,9 @@
       return {
         title: 'cancelAnimationFrame',
         taskId: 0,
+        lastTime: 0,
+        frameCount: 0,
+        fps: 0,
         testFrameCount: 0
       }
     },
@@ -23,8 +28,14 @@
     },
     methods: {
       startRequestAnimationFrame() {
-        this.taskId = requestAnimationFrame((_ : number) => {
-          this.testFrameCount++
+        this.taskId = requestAnimationFrame((timestamp : number) => {
+          this.testFrameCount++
+          this.frameCount++
+          if (timestamp - this.lastTime >= 1000) {
+            this.fps = this.frameCount
+            this.frameCount = 0
+            this.lastTime = timestamp
+          }
           this.startRequestAnimationFrame()
         })
       },
@@ -42,5 +53,11 @@
 
   .frame-count {
     margin-top: 15px;
+  }
+
+  .tips {
+    font-size: 12px;
+    margin-top: 30px;
+    opacity: 0.7;
   }
 </style>
-- 
GitLab