improvement: Improve useRafFn logic and fix errors

Author: microcipcip

src/components/useRafFn/stories/UseRafFnDemo.vue

@@ -33,7 +33,7 @@
           <br />
           <br />
           <br />
-          <input type="number" v-model="fpsRef" />
+          <input type="number" min="1" max="121" v-model="fpsRef" />
         </td>
       </tr>
     </tbody>
@@ -50,7 +50,7 @@ export default Vue.extend({
   setup() {
     const animDuration = ref(0)
     const callbackCounter = ref(0)
-    const fpsRef = ref(4)
+    const fpsRef = ref(120)
     const animHandler = (t: number) => {
       callbackCounter.value = callbackCounter.value + 1
       animDuration.value = Math.ceil(t)

src/components/useRafFn/useRafFn.ts

@@ -1,40 +1,62 @@
-import { ref, isRef, watch, onMounted, onUnmounted, Ref } from '../../api'
+import { ref, isRef, computed, onMounted, onUnmounted, Ref } from '../../api'
 
 type TFps = number | Ref<number>
 
-const getFps = (fps: TFps) => (isRef(fps) ? fps.value : fps)
+const getFps = (fps: TFps) => Number(isRef(fps) ? fps.value : fps)
 const calcFpsInterval = (fps: number) => 1000 / fps
+const fpsLimit = 120
 
 export function useRafFn(
   callback: Function,
-  fps: TFps = 60,
+  // Note: a value greater than 120 will disable the fps check logic
+  // giving maximum precision and smoothness
+  fps: TFps = fpsLimit + 1,
   runOnMount = true
 ) {
   const isRunningRef = ref(false)
-  const fpsIntervalRef = ref(calcFpsInterval(getFps(fps)))
+  // Using a computed here allows us to update fps
+  // dynamically from user's input
+  const fpsIntervalRef = computed(() => calcFpsInterval(getFps(fps)))
+
+  let isPausedGuard = false
   let startTime = 0
   let timeNow = 0
-  let isPaused = false
-  let prevTime = 0
-  let timeLast = 0
-  function loop(timeStamp: number) {
+  let timeWhenPaused = 0
+  let timeDelta = 0
+  const loop = (timeStamp: number) => {
     if (!startTime) startTime = timeStamp
     if (!isRunningRef.value) return
 
-    if (!isPaused) {
-      timeNow = timeStamp - startTime - prevTime
-    } else {
-      prevTime = timeStamp - startTime - timeNow
-      timeNow = timeStamp - startTime - prevTime
-      isPaused = false
+    if (isPausedGuard) {
+      // Save the time when we pause the loop so that later we can
+      // adjust the time we return to the callback
+      timeWhenPaused = timeStamp - startTime - timeNow
+      isPausedGuard = false
     }
 
-    // Run callback only on the given fps
-    if (Math.ceil(timeNow - timeLast) > fpsIntervalRef.value) {
+    // Adjust timeNow to account for startTime and timeWhenPaused
+    timeNow = timeStamp - startTime - timeWhenPaused
+
+    // Always run the callback if fps is greater than fpsLimit
+    const callbackShouldAlwaysRun = getFps(fps) > fpsLimit
+    if (callbackShouldAlwaysRun) {
+      // Store timeDelta for future computations
+      timeDelta = timeNow
       callback(timeNow)
-      timeLast = timeNow
     }
 
+    // Run callback only when !callbackShouldAlwaysRun
+    // and the given fps matches the lapsed time
+    if (!callbackShouldAlwaysRun) {
+      const elapsedTime = Math.ceil(timeNow - timeDelta)
+      if (elapsedTime > fpsIntervalRef.value) {
+        // Store timeDelta for future computations
+        timeDelta = timeNow
+        callback(timeNow)
+      }
+    }
+
+    // Run loop again recursively
     requestAnimationFrame(loop)
   }
 
@@ -45,19 +67,8 @@ export function useRafFn(
 
   const stop = () => {
     isRunningRef.value = false
-    isPaused = true
-  }
-
-  // Watch fps value since it could potentially be a ref and we may want
-  // to change the Raf speed from user's input
-  const updateFpsInterval = () => {
-    // If fps is not a ref there is no point in updating it
-    if (!isRef(fps)) return
-    watch(fps, () => {
-      fpsIntervalRef.value = calcFpsInterval(getFps(fps))
-    })
+    isPausedGuard = true
   }
-  updateFpsInterval()
 
   onMounted(() => runOnMount && start())
   onUnmounted(stop)