Class FrameLoop

src/FrameLoop.ts:11–78

const FPS = 100 / 6 / 2;

export class FrameLoop {
  rafId = 0;
  queue = new Set<Function>();
  running = false;
  time = {
    start: 0,
    delta: 0,
    elapsed: 0,
    _elapsed: 0,
  };
  onDemand = false;

  tick() {
    if (!this.running) {
      return;
    }
    this.update();
    this.rafId = window.requestAnimationFrame(this.tick.bind(this));
  }

  update() {
    if (!this.running) {
      return;
    }
    this.updateTime();
    this.queue.forEach((cb) => cb());
  }

  run() {
    if (!this.running) {
      this.time = { start: now(), elapsed: 0, delta: 0, _elapsed: 0 };
      this.running = true;
      if (!this.onDemand) {
        // we need elapsed time to be > 0 on the first frame
        this.rafId = window.requestAnimationFrame(this.tick.bind(this));
      }
    }
  }

  start(cb: Function) {
    this.queue.add(cb);
    this.run();
  }

  stop(cb: Function) {
    if (!cb) {
      return;
    }
    this.queue.delete(cb);
    if (!this.queue.size) {
      this.stopAll();
    }
  }

  stopAll() {
    if (this.rafId) window.cancelAnimationFrame(this.rafId);

    this.running = false;