refactor: timer factory

Author: segunadebayo

packages/utilities/core/src/timers.ts

@@ -1,42 +1,104 @@
-export interface RafIntervalOptions {
+export interface TimerBaseContext {
   startMs: number
   deltaMs: number
 }
 
-export function setRafInterval(callback: (options: RafIntervalOptions) => void, interval: number) {
-  let start = performance.now()
-  let handle: number
+interface TimerContext extends TimerBaseContext {
+  now: number
+}
+
+export type TimerContextFn = (ctx: TimerContext) => boolean | void
+
+const currentTime = () => performance.now()
+
+export class Timer {
+  private frameId: number | null = null
+  private pausedAtMs: number | null = null
+  private context: TimerContext
+
+  constructor(private readonly onTick: TimerContextFn) {
+    this.context = { now: 0, startMs: currentTime(), deltaMs: 0 }
+  }
+
+  private cancelFrame = () => {
+    if (this.frameId === null) return
+    cancelAnimationFrame(this.frameId)
+    this.frameId = null
+  }
+
+  setStartMs = (startMs: number) => {
+    this.context.startMs = startMs
+  }
+
+  get elapsedMs(): number {
+    if (this.pausedAtMs !== null) {
+      return this.pausedAtMs - this.context.startMs
+    }
+    return currentTime() - this.context.startMs
+  }
 
-  function loop(now: number) {
-    const delta = now - start
+  start = () => {
+    if (this.frameId !== null) return
 
-    if (delta >= interval) {
-      start = interval > 0 ? now - (delta % interval) : now
-      callback({ startMs: start, deltaMs: delta })
+    const now = currentTime()
+    if (this.pausedAtMs !== null) {
+      this.context.startMs += now - this.pausedAtMs
+      this.pausedAtMs = null
+    } else {
+      this.context.startMs = now
     }
 
-    handle = requestAnimationFrame(loop)
+    this.frameId = requestAnimationFrame(this.#tick)
   }
 
-  handle = requestAnimationFrame(loop)
-  return () => cancelAnimationFrame(handle)
-}
+  pause = () => {
+    if (this.frameId === null) return
+    this.cancelFrame()
+    this.pausedAtMs = currentTime()
+  }
 
-export function setRafTimeout(callback: () => void, delay: number) {
-  const start = performance.now()
-  let handle: number
+  stop = () => {
+    if (this.frameId === null) return
+    this.cancelFrame()
+    this.pausedAtMs = null
+  }
+
+  #tick = (now: number) => {
+    this.context.now = now
+    this.context.deltaMs = now - this.context.startMs
 
-  function loop(now: number) {
-    const delta = now - start
+    const shouldContinue = this.onTick(this.context)
 
-    if (delta >= delay) {
-      callback()
+    if (shouldContinue === false) {
+      this.stop()
       return
     }
 
-    handle = requestAnimationFrame(loop)
+    this.frameId = requestAnimationFrame(this.#tick)
   }
+}
+
+export function setRafInterval(fn: (ctx: TimerBaseContext) => void, intervalMs: number) {
+  const timer = new Timer(({ now, deltaMs }) => {
+    if (deltaMs >= intervalMs) {
+      const startMs = intervalMs > 0 ? now - (deltaMs % intervalMs) : now
+      timer.setStartMs(startMs)
+      fn({ startMs, deltaMs })
+    }
+  })
+
+  timer.start()
+  return () => timer.stop()
+}
+
+export function setRafTimeout(fn: () => void, delayMs: number) {
+  const timer = new Timer(({ deltaMs }) => {
+    if (deltaMs >= delayMs) {
+      fn()
+      return false
+    }
+  })
 
-  handle = requestAnimationFrame(loop)
-  return () => cancelAnimationFrame(handle)
+  timer.start()
+  return () => timer.stop()
 }