如何暂停 requestAnimationFrame 并在特定时间在 React 中恢复？

问题描述

我正在 React 中创建一个计时器挂钩，但我希望能够启动和暂停计时器。我正在使用 requestAnimationFrame 以便我可以获得进度的百分比。

到目前为止我的代码：

import { useCallback,useEffect,useRef,useState } from "react";

interface TimeConfig {
  invokeStart?: boolean;
}

/**
 *
 * @param time Time in milliseconds
 */
export const useTimer = (
  time: number,{ invokeStart = false }: Partial<TimeConfig> = {}
) => {
  const raf = useRef<number | null>(null);
  const rafActive = useRef<boolean>(false);
  const rafStartTime = useRef<number | null>(null);

  const [elapsed,setElapsed] = useState(0);

  const tick: FrameRequestCallback = useCallback(
    (timestamp) => {
      if (rafActive.current) {
        if (rafStartTime.current === null) rafStartTime.current = timestamp;

        const elapsed = timestamp - rafStartTime.current;

        setElapsed(Math.min(elapsed,time));

        if (elapsed < time) {
          raf.current = requestAnimationFrame(tick);
        }
      }
    },[time,elapsed]
  );

  const start = useCallback(() => {
    if (!rafActive.current) {
      rafActive.current = true;
      raf.current = requestAnimationFrame(tick);
    }
  },[tick]);

  const pause = useCallback(() => {
    if (rafActive.current) {
      rafActive.current = false;
      raf.current && cancelAnimationFrame(raf.current);
    }
  },[]);

  useEffect(() => {
    if (invokeStart) {
      start();
    }
  },[invokeStart,start]);

  return { start,pause,elapsed };
};

我知道从 requestAnimationFrame 回调返回的时间戳是页面加载后的时间戳。但是以这种方式暂停和播放有什么好的做法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjs reactjs