记录动画帧

在每个动画帧上调用提供的回调函数。

• 使用递归。
• 假设 running 为 true，则继续调用 Window.requestAnimationFrame() 来调用提供的回调函数。
• 返回一个具有 start 和 stop 两个方法的对象，以允许手动控制记录。
• 如果在函数调用时省略第二个参数 autoStart，则隐式调用 start。

const recordAnimationFrames = (callback, autoStart = true) => {
  let running = false,
    raf;
  const stop = () => {
    if (!running) return;
    running = false;
    cancelAnimationFrame(raf);
  };
  const start = () => {
    if (running) return;
    running = true;
    run();
  };
  const run = () => {
    raf = requestAnimationFrame(() => {
      callback();
      if (running) run();
    });
  };
  if (autoStart) start();
  return { start, stop };
};

const cb = () => console.log('动画帧触发');
const recorder = recordAnimationFrames(cb);
// 每个动画帧都会输出 '动画帧触发'
recorder.stop(); // 停止输出
recorder.start(); // 重新开始输出
const recorder2 = recordAnimationFrames(cb, false);
// 需要显式调用 `start` 来开始记录帧