javascript - 无法清除 setInterval
问题描述
我想在单击停止按钮时清除间隔,似乎clearInterval
没有按预期工作。handleStop
触发函数或触发handleReset
id时计时器不会停止
这是我想做的事情:
import React from "react"
import useApp from "../App"
import Interact from "./Interact";
const Timer = () => {
let timer;
const {millisec , setMillisec , sec , setSec , min , setMin , hr , setHr} = useApp();
const handleStart = () => {
timer = setInterval(() => {
setMillisec((prev) => {
if (prev === 100) {
setSec((prevB) =>{
if(prevB === 60){
setMin(prevC => {
if(prevC === 60){
setHr(prevD => prevD + 1)
return 0
}
return prevC + 1
})
return 0
}
return prevB + 1
});
return 0;
}
return prev + 1;
});
}, 10);
};
const handleStop = () => {
clearInterval(timer)
}
const handleReset = () => {
clearInterval(timer)
setMillisec(0)
setSec(0)
setMin(0)
setHr(0)
}
return(
<>
<div className="parent">
<div className="main">
<h1 className="heading">Stop Watch</h1>
<div className="timer">
<div className ="hour">{hr}</div>
<div className ="min">{min}</div>
<div className ="sec">{sec}</div>
<div className ="millisec">{millisec}</div>
</div>
<Interact handleStart = {handleStart}
handleStop = {handleStop}
handleReset ={handleReset}
/>
</div>
</div>
</>
)
}
export default Timer
解决方案
timer
每次渲染 Timer 组件时重新声明变量。因此,setInterval 引用被重置。
您可以在全局范围内声明计时器,例如
...
import Interact from "./Interact";
let timer;
const Timer = () => {
const {millisec , setMillisec , sec , setSec , min , setMin , hr , setHr} = useApp();
const handleStart = () => {
...
或者也可以使用 react-hooks 来维护 setInterwal 引用。像这样
推荐阅读
- mysql - 试图将我的成分收集到我的 MySQL 中的食谱中
- mysql - 如何在sql中使用密码()?
- r - gganimate 中的 shadow_mark() 问题
- java - 尽管有 NoArgsConstructor,为什么“JsonMappingException:无法实例化类型的值”?
- python - 某些节点上的 Python mpi4py 脚本分段错误
- c++ - 二维数组中相等相邻元素的计数
- html - HTML 元素样式在作用域样式中不起作用
- android - Glide 占位符缓存
- javascript - 为什么每次渲染都会调用 `useEffect` 的清理功能?
- asp.net-core - 如何在cshtml文件中使用引导程序4将3个下拉选择表单连续放置