基于react的定时器封装

一、创建useInterval.ts文件

const useInterval=(callback:Function, delay:number, immediately?:boolean)=>{
    const savedCallback = useRef<Function>();
    const [currentTime, setCurrentTime]=useState<number>(0);
    const [isPaused, setIsPaused]=useState<boolean>(false);
    const Timer=useRef<number | null>(null);

    useEffect(() => {
        savedCallback.current = ()=>{
            setCurrentTime(currentTime+1);
            callback &&  callback();
        };
    });

    useEffect(() => {
        immediately && createTimer();
        return () => clearTimer();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [delay]);
    // 清除定时器
    const clearTimer=()=>{
        Timer.current && clearInterval(Timer.current);
        Timer.current=null;
    };
    // 创建定时器的函数
    const TimerTick=()=> {
        savedCallback.current && savedCallback.current();
        setIsPaused(false);
    };
    // 创建定时器
    const createTimer=()=>{
        Timer.current=Number(setInterval(TimerTick, delay));
    };
    /**
     * 定时器启动【包含重启】
     * 1、默认直接启动
     * 2、定时器先暂停，然后重启
     */
    const TimerStart=async()=>{
        await   clearTimer();
        !isPaused && setCurrentTime(0);
        createTimer();
    };
    // 定时器销毁
    const TimerDestroyed=()=>{
        clearTimer();
        setCurrentTime(0);
        setIsPaused(false);
    };
    //定时器暂停
    const TimerPause=()=>{
        setIsPaused(true);
        clearTimer();
    };
    return {TimerStart, TimerDestroyed, TimerPause, currentTime};
};
export {useInterval as default};

二、使用示例

const {TimerStart, TimerDestroyed, TimerPause, currentTime}= useInterval(()=>{
     console.log(currentTime);
}, 1000, true);

（1）入参：useInterval中传递三个参数：callback、delay、immediately

• callback：自定义定时器方法
• delay：定时器调用时间间隔
• immediately：【可选】是否立即启动定时器。默认不启动定时器

（2）返回参数：

• currentTime：当前定时器执行的次数。当销毁的时候，次数会清零
• TimerStart：定时器启动方法
• TimerPause：定时器暂停方法。定时器暂停后，再次启动定时器（调用TimerStart），currentTime会继续原有次数叠加
• TimerDestroyed：定时器销毁方法。定时器离开页面后会自动销毁，不用自己调用