From 69990c0bff04e19060c141b8f10dbb0ece878921 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 20 Feb 2024 11:56:58 +0100
Subject: [PATCH] fix(useRafFn): fix `fpsLimit` option, fix #3481, close #3482

---
 packages/core/useRafFn/demo.vue | 19 ++++++++++++++++---
 packages/core/useRafFn/index.ts |  9 ++++++---
 unocss.config.ts                |  2 +-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/core/useRafFn/demo.vue b/packages/core/useRafFn/demo.vue
index 472d0238815..759cc5e87d0 100644
--- a/packages/core/useRafFn/demo.vue
+++ b/packages/core/useRafFn/demo.vue
@@ -1,13 +1,26 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRafFn } from '@vueuse/core'
+import { useRafFn } from './index'
 
+const fpsLimit = 60
 const count = ref(0)
-const { pause, resume } = useRafFn(() => count.value += 1)
+const deltaMs = ref(0)
+const { pause, resume } = useRafFn(({ delta }) => {
+  deltaMs.value = delta
+  count.value += 1
+}, { fpsLimit })
 </script>
 
 <template>
-  <div>Count: {{ count }}</div>
+  <div font-mono>
+    Frames: {{ count }}
+  </div>
+  <div font-mono>
+    Delta: {{ deltaMs.toFixed(0) }}ms
+  </div>
+  <div font-mono>
+    FPS Limit: {{ fpsLimit }}
+  </div>
   <button @click="pause">
     pause
   </button>
diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts
index 47c1380e19b..799587e737c 100644
--- a/packages/core/useRafFn/index.ts
+++ b/packages/core/useRafFn/index.ts
@@ -55,22 +55,25 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options:
     if (!isActive.value || !window)
       return
 
-    const delta = timestamp - (previousFrameTimestamp || timestamp)
+    if (!previousFrameTimestamp)
+      previousFrameTimestamp = timestamp
+
+    const delta = timestamp - previousFrameTimestamp
 
     if (intervalLimit && delta < intervalLimit) {
       rafId = window.requestAnimationFrame(loop)
       return
     }
 
-    fn({ delta, timestamp })
-
     previousFrameTimestamp = timestamp
+    fn({ delta, timestamp })
     rafId = window.requestAnimationFrame(loop)
   }
 
   function resume() {
     if (!isActive.value && window) {
       isActive.value = true
+      previousFrameTimestamp = 0
       rafId = window.requestAnimationFrame(loop)
     }
   }
diff --git a/unocss.config.ts b/unocss.config.ts
index b1674713838..254257bf2ae 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -26,7 +26,7 @@ export default defineConfig({
       primary: '#3eaf7c',
     },
     fontFamily: {
-      mono: 'var(--vt-font-family-mono)',
+      mono: 'var(--vp-font-family-mono)',
     },
   },
   transformers: [