react 实现倒计时

最新推荐文章于 2024-07-01 15:00:28 发布

ttt唐老鸭

最新推荐文章于 2024-07-01 15:00:28 发布

阅读量7k

点赞数 2

分类专栏： react 前端 js

本文链接：https://blog.csdn.net/qq_42339350/article/details/115015234

版权

前端同时被 3 个专栏收录

63 篇文章 1 订阅

订阅专栏

react

20 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

思路

利用setTimeOut，每秒将数值减一
利用useRef设置定时器，方便清楚


	const [time,setTime]=useState(null)//倒计时时间
    const timeRef=useRef()//设置延时器
	//倒计时
    useEffect(()=>{
    	//如果设置倒计时且倒计时不为0
        if(time&&time!==0)
            timeRef.current=setTimeout(()=>{
                setTime(time=>time-1)
            },1000)
        //清楚延时器
        return ()=>{
            clearTimeout(timeRef.current)
        }
    },[time])

	<button onClick={()=>{settime(60)}} >开始计时</button>