fps limited requestAnimationFrame

RequestAnimationFrame_Renderer.ts

class Renderer {
    #targetDelay: number;
    #onTick: (elapsed: number) => void;

    #lastTickTimestamp: number = 0;
    #animationId?: number;

    constructor(fps: number, onTick: (elapsed: number) => void) {
        this.#targetDelay = 1_000 / fps;
        this.#onTick = onTick;
    }

    get isTicking(): boolean {
        return this.#animationId !== undefined;
    }

    start() {
        if (this.#animationId !== undefined) return;
        this.#animationId = window.requestAnimationFrame(timestamp => this.#tick(timestamp));
    }

    end() {
        if (this.#animationId === undefined) return;
        window.cancelAnimationFrame(this.#animationId);
    }

    #tick(timestamp: DOMHighResTimeStamp) {
        this.#animationId = window.requestAnimationFrame(timestamp => this.#tick(timestamp));

        const elapsed = timestamp - this.#lastTickTimestamp;

        if (elapsed < this.#targetDelay) return;

        this.#onTick(elapsed);

        this.#lastTickTimestamp = timestamp;
    }
}