refactor: update ticking mechanism

Author: ivodolenc

src/index.ts

@@ -99,10 +99,10 @@ export function createFrame<T extends string = PhaseIDs>(
   let isPaused: boolean = false
 
   const frameInterval: number = 1000 / (fps || 60)
+  const maxDeltaTime: number = 40
   let lastFrameTime: number = 0
   let lastPauseTime: number | null = null
   let totalPausedTime: number = 0
-  let useFrameInterval: boolean = true
 
   let state: FrameState = defaultState()
 
@@ -169,9 +169,13 @@ export function createFrame<T extends string = PhaseIDs>(
       if (isBrowser) tickerId = requestAnimationFrame(runFrame)
     } else {
       const now = performance.now()
+      const delta = now - lastFrameTime
+
+      lastFrameTime = now - (delta % frameInterval)
+
       tickerId = setTimeout(
-        () => runFrame(now),
-        Math.max(0, frameInterval - (now - lastFrameTime)),
+        runFrame,
+        Math.max(0, frameInterval - delta),
       ) as unknown as number
     }
   }
@@ -190,20 +194,28 @@ export function createFrame<T extends string = PhaseIDs>(
     }
   }
 
-  const runFrame = (timestamp: number): void => {
-    const time = timestamp - totalPausedTime
+  const runFrame = (): void => {
+    const now = performance.now()
+    const time = now - totalPausedTime
+
     shouldRunTicker = loops.size > 0
 
     if (fps) {
       const delta = time - lastFrameTime
       if (delta < frameInterval) {
-        runTicker()
+        if (!isPaused) runTicker()
         return
       }
       lastFrameTime = time - (delta % frameInterval)
+      state.delta = frameInterval
+    } else {
+      state.delta =
+        state.timestamp === 0
+          ? frameInterval
+          : Math.min(Math.max(time - state.timestamp, 1), maxDeltaTime)
+      lastFrameTime = time
     }
 
-    state.delta = useFrameInterval ? frameInterval : time - state.timestamp
     state.timestamp = time
     state.isPaused = isPaused
 
@@ -213,10 +225,8 @@ export function createFrame<T extends string = PhaseIDs>(
 
     state.isRunning = false
 
-    if (shouldRunTicker && !isPaused) {
-      useFrameInterval = false
-      runTicker()
-    } else cancelTicker()
+    if (shouldRunTicker && !isPaused) runTicker()
+    else cancelTicker()
   }
 
   const frame: Frame<T> = {
@@ -261,7 +271,7 @@ export function createFrame<T extends string = PhaseIDs>(
       options: PhaseScheduleOptions = {},
     ) => {
       if (!shouldRunTicker) {
-        useFrameInterval = true
+        shouldRunTicker = true
         lastFrameTime = performance.now()
         runTicker()
       }