英文:
clearInterval don't work, counter continue
问题
我在一个REACTjs函数组件中使用了这部分代码，我的计数器开始得很好，但clearInterval没有效果，它仍然在计数... 我通过"console.log"检查了这段代码的每一行是否在预定的时间调用。存储由redux toolkit管理。
"startCounter"只是旋转一个小动画，表示计数器正在运行。谢谢你的关注。
// 开始 = 启动器 -> true
// 停止 = 启动器 -> False
function setTimer (starter) {
let interv = setInterval(setClock, 1000);
setStartCounter(true);
if (!starter) {
clearInterval(interv);
setStartCounter(false);
}
}
function setClock () {
dispatch(toggleTimeCountTask(task.id));
}
"interv"变量仅在此函数中声明并使用，我查看了一些类似的主题，但找不到解决方案。
英文:
I use this portion of code in a REACTjs function component, my counter starts fine, but the clearInterval has no effect, it still counts... I checked with "console.log" that each line of this code is called at the desired time. The store is managed by redux toolkit.
"startCounter" just spins a mini animation indicating that the counter is running. Thank you for your attention.
// Start = starter -> true
// Stop = starter -> False
function setTimer (starter) {
let interv = setInterval(setClock, 1000);
setStartCounter(true);`
if (!starter) {`
clearInterval(interv);
setStartCounter(false); `
}
}
function setClock () {`
dispatch(toggleTimeCountTask(task.id));`
}
The "interv" variable is declared and used only in this function, I went through some similar topics, but couldn't find the solution.
答案1
得分: 1
你在函数内部实例化了 setInterval，因此会导致两个定时器同时运行。你应该将它移到函数外部，如下所示：
const interv = useRef(null);
function setTimer (starter) {
if(!interv.current) {
interv.current = setInterval(setClock, 1000);
}
setStartCounter(true);
if (!starter) {
clearInterval(interv.current);
setStartCounter(false);
interv.current = null;
}
}
function setClock () {
dispatch(toggleTimeCountTask(task.id));
}
如果这是在一个函数式组件内部，你需要在组件销毁时进行清理：
useEffect(() => {
return () => {
if(interv.current) {
clearInterval(interv.current);
}
};
}, []);
英文:
You are instantiating the setInterval inside your function. So two executions will result in two timers. You should move it outside the function as so:
const interv = useRef(null);
function setTimer (starter) {
if(!interv.current) {
interv.current = setInterval(setClock, 1000);
}
setStartCounter(true);
if (!starter) {
clearInterval(interv.current);
setStartCounter(false);
interv.current = null;
}
}
function setClock () {
dispatch(toggleTimeCountTask(task.id));
}
If this is inside a functional component, you need to cleanup if the component is destroyed:
useEffect(() => {
return () => {
if(interv.current) {
clearInterval(interv.current);
}
};
}, []);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论