useInterval

计时器需要功能

1 .暂停，开启,，传入一个总的执行次数
2 .可以随时调整里面的变化的值,也就是调整进度

import {useEffect,useRef} from 'react'
export default function useInterval(
    fn:()=>void,
    delay:number|null|undefined,
    options?:{
        immediate?:boolean
    }
):void{
    const immediate=options?.immediate
    // 如果options传了参数就取他的值

    const timerRef=useRef <()=>void> ()
    // 传入ref的是一个函数

    timerRef.current=fn

    useEffect(()=>{
        if(delay===undefined||delay==null)return 

        if(immediate){
            timerRef.current?.()
            // 是否初始渲染就启动计时器
        }
        const timer=setInterval(()=>{
            timerRef.current?.()
        },delay)
        return ()=>{
            clearInterval(timer)
        }
    },[delay, immediate])
    // 有了delay变化的时候就会重新启动
    // delay:number 改变间隔，或者重新启动计时器
    // delay:undefiend 暂停

// // 或者说每次里面调用了传入的函数，导致外面的发生变化，其实还是会走到这个函数，又会在执行，重新赋值timerRef,绑定新的函数，这里其实获得的是最新的值
}

const [count,setCount]=useState(0)
    const [time,setTime]=useState<any>(1000)
    useInterval(()=>{
        setCount(c=>c+1)
    },time)

    return (
        <div>
            {count}-{time}
            <hr/>
            <button onClick={()=>setTime(null)}>
                暂停
            </button>
            <button onClick={()=>setTime(1000)}>
                启动
            </button>
            <button onClick={()=>setTime((c: number)=>c+1000)}>
                增加间隔
            </button>
            <button onClick={()=>setTime((c:number)=>c-100)}>
                减少间隔
            </button>
            <button onClick={()=>setCount(0)}>
                重置
            </button>
        </div>