Skip to content

endlessRAF()

Runs a loop driven by requestAnimationFrame: on each frame, quitFunction is called first. If it returns a truthy value, the loop stops and no further frames are scheduled. If it returns falsy or nothing, the next frame is scheduled recursively.

Use this for per-frame work (animations, layout reads after paint) without managing cancelAnimationFrame manually — returning true from quitFunction is the exit condition.

When asMicrotask is true, scheduling the next RAF is deferred with queueMicrotask so other microtasks can run before the frame is requested (useful when you need to batch DOM updates or let reactive frameworks flush first).

Examples:

Stop after 60 frames (~1s at 60Hz):

ts
let frames = 0;
endlessRAF(() => {
  frames++;
  updateSomething(frames);
  return frames >= 60;
});

Run until an element is removed or a flag is set:

ts
let running = true;
endlessRAF(() => {
  if (!running || !document.body.contains(el)) return true;
  draw(el);
}, true);

Released under the MIT License.