项目场景:
react hooks定时器--清除定时器问题描述:
onStart的时候开启定时器,点击按钮停止时清除定时器,onPause方法中获取不到定时器
function StopCWatch() {
const [isStarted, setStarted] = useState(false);
const [startTime, setTime] = useState(null); // 开始时间
const [currentTime, setCurrentTime] = useState(null); // 当前时间
const [splits, setSplits] = useState([]);
let intervalHandle;
// 开始
const onStart = () => {
setStarted(true);
setTime(new Date().getTime());
setCurrentTime(new Date().getTime());
// 定时器
intervalHandle = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
}
// 停止
const onPause = () => {
clearInterval(intervalHandle); // 清除定时器有问题
setStarted(false);
}
return (
<div>
<MajorClock milliseconds={currentTime - startTime}/>
<ControlButtons
activated={isStarted}
onStart={onStart}
onPause={onPause}
/>
<SplitTimes values={splits}/>
</div>
)
}
export default StopCWatch;
原因分析:
原因:直接通过clearInterval(intervalHandle)是无法清除掉定时器的,每次组件重新渲染的时候, 都会执行 let intervalHandle; , 所以你清除定时器时, 都获取不到intervalHandle。
解决方案:
把定时器的handle用useRef保存起来
let intervalHandle = useRef();
创建时
intervalHandle.current = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
清除时
clearInterval(intervalHandle.current);