fix(useRafFn): fix fpsLimit option, fix #3481, close #3482

Author: antfu

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>

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)
     }
   }

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: [