Search documentation

Search by topic, API name, or import path.

GitHub ↗

class / @typed/template

RequestAnimationFrameRenderQueue

A RenderQueue that schedules tasks using requestAnimationFrame. Good for visual updates that should happen before the next repaint.

Package version
1.0.0-beta.7
Category
Frame scheduling
Since
1.0.0

Import

import { RequestAnimationFrameRenderQueue } from "@typed/template";

Signatures

export declare class RequestAnimationFrameRenderQueue extends RenderQueue {
    readonly durationAllowed: number;
    constructor(durationAllowed?: number);
}

Why

Animation-frame scheduling aligns visual DOM work with the browser paint cycle while enforcing a configurable per-frame time budget.

Ownership and lifetime

The queue owns each animation-frame request until it runs or is cancelled by disposal.

Constructor

Creates an animation-frame queue with a per-frame millisecond budget.

Constructor: Why

Lets applications tune visual work to their frame budget.

Constructor: Ownership and lifetime

The instance owns animation-frame requests until disposal.

Property: durationAllowed

Maximum work budget exposed through the frame’s synthetic IdleDeadline.

Property: durationAllowed: Why

Bounds local queued work so the browser can return to painting.

Property: durationAllowed: Ownership and lifetime

Immutable numeric configuration for this queue instance.

Examples

import { RequestAnimationFrameRenderQueue, RenderPriority } from "@typed/template/RenderQueue"

const queue = new RequestAnimationFrameRenderQueue(16) // 16ms budget
const status = document.createElement("output")
queue.add("update", () => status.replaceChildren("ready"), () => {}, RenderPriority.Raf(5))

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source