requestAnimationFrameRecursive.ts

export const requestAnimationFrameRecursive = (
  fn: (
    highResTimestamp: DOMHighResTimeStamp,
    additionalInfo: {
      stop: () => void;
      totalTimelapse: DOMHighResTimeStamp;
      timelapseSinceLast: DOMHighResTimeStamp;
    },
  ) => void,
  o?: {
    initialTimestamp: DOMHighResTimeStamp;
    lastTimestamp: DOMHighResTimeStamp;
  },
): (() => void) => {
  let stopNext: () => void;
  const stop = (): void => {
    window.cancelAnimationFrame(id);
    stopNext?.();
  };

  const id = window.requestAnimationFrame(ts => {
    const initialTimestamp = o?.initialTimestamp ?? ts;
    const lastTimestamp = o?.lastTimestamp ?? initialTimestamp;

    // this needs to happen before calling `fn` so `stop` is defined when fn is called
    stopNext = requestAnimationFrameRecursive(fn, {
      initialTimestamp,
      lastTimestamp: ts,
    });

    fn(ts, {
      stop,
      totalTimelapse: ts - initialTimestamp,
      timelapseSinceLast: ts - lastTimestamp,
    });
  });

  return stop;
};