英文:
clearInterval don't work, counter continue
问题
我在一个REACTjs函数组件中使用了这部分代码，我的计数器开始得很好，但clearInterval没有效果，它仍然在计数... 我通过"console.log"检查了这段代码的每一行是否在预定的时间调用。存储由redux toolkit管理。
"startCounter"只是旋转一个小动画，表示计数器正在运行。谢谢你的关注。
// 开始 = 启动器 -> true// 停止 = 启动器 -> Falsefunction 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 -> Falsefunction 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);}};}, []);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论