timer

example.js

import { withTimer } from './with-timer'

withTimer(() => {
  const c = document.createElement('canvas')
  document.body.appendChild(c)
  const cc = c.getContext('2d')
  let hue = 0

  return () => {
    hue++
    cc.fillStyle = `hsl(${hue}, 50%, 50%`
    cc.fillRect(0, 0, c.width, c.height)
  }
})

with-timer.js

export function withTimer(drawMethod) {
  const update = drawMethod()
  const fps = 30
  const deltaTime = 1000/fps
  let accumulatedTime = 0
  let lastTime = performance.now()

  function enqueue(time = performance.now()) {
    accumulatedTime += (time - lastTime)

    while (accumulatedTime > deltaTime) {
      update(deltaTime)
      accumulatedTime -= deltaTime
    }

    lastTime = time

    requestAnimationFrame(enqueue)
  }

  enqueue()
}