功能需求:由于我这边的需求是进入一个文件阅读时间超过10s后触发一个接口来增加用户的积分,但是考虑到如果10s没满用户就离开当前页发现还是会触发之前的定时器,所以这边需要我们清除定时器。
这边用到的时useRef全局定义一个定时器,在useEffect中进行创建和清除
直接上代码
import { useEffect, useState ,useRef} from 'react'
//全局定义一个定时器
let intervalHandle =useRef()
const getTimePoint=(fid)=>{
//这边给全局的定时器赋值
intervalHandle.current = setTimeout(()=>{
.....这边发送接口来增加用户的积分
},10000)
}
//每次进入页面触发10s后发送接口的函数
useEffect(()=>{
getTimePoint(fid)
},[])
//这边进行消除定时器操作
useEffect(() => {
return () => {
// 清除定时器
clearTimeout(intervalHandle.current);
};
}, []);