Utility to enqueue + cancel callback for *next* animation frame (Double rAF)

request-next-animation-frame.ts

const requestNextAnimationFrame = (callback: FrameRequestCallback) => {
  const handles: number[] = [];
  const requestThisAnimationFrame = (callback: FrameRequestCallback) => {
    handles.push(window.requestAnimationFrame(callback));
  };
  requestThisAnimationFrame(() => requestThisAnimationFrame(callback));
  return () => handles.forEach(handle => window.cancelAnimationFrame(handle));
};


const box = document.createElement('div');
document.body.prepend(box);
box.style.width = '100px';
box.style.height = '100px';
box.style.background = 'tomato';
box.style.opacity = '0';
box.style.transition = 'opacity 1s ease-in-out';
const cancel = requestNextAnimationFrame(() => {
  box.style.opacity = '1';
});
// cancel(); // <-- cancels the outer callback (inner is therefore never enqueued)
window.requestAnimationFrame(() => {
  // cancel(); // <-- cancels the inner callback (the outer has already executed)
});