英文:
clearInterval() fails to stop an interval running on a timer
问题
首次使用clearInterval()，查看其他示例和间隔文档，似乎这是停止间隔的方法。不确定我漏掉了什么。
意图是在currentStop属性更新时停止计时器。
import React, { useEffect, useState } from 'react';type Props = {stopNumber: number;currentStop: number;};const timerComponent = ({ stopNumber, currentStop }: Props) => {let interval: NodeJS.Timer;// 在计时器上更新已过时间useEffect(() => {if (stopNumber === currentStop) {interval = setInterval(() => {console.log('timer is running');}, 3000);// 在卸载时清除间隔return () => clearInterval(interval);}}, []);// 清除正在运行的计时器useEffect(() => {if (stopNumber !== currentStop) {clearInterval(interval);}}, [currentStop]);};
英文:
First time using clearInterval() looking at other examples and the interval docs this appears to be the way to stop an interval. Not sure what I am missing.
The intention is to kill the timer when the currentStop prop updates.
import React, { useEffect, useState } from 'react';type Props = {stopNumber: number;currentStop: number;};const timerComponent = ({ stopNumber, currentStop }: Props) => {let interval: NodeJS.Timer;// Update elapsed on a timeruseEffect(() => {if (stopNumber === currentStop) {interval = setInterval(() => {console.log('timer is running');}, 3000);// Clear interval on unmountreturn () => clearInterval(interval);}}, []);// Clear timers that were runninguseEffect(() => {if (stopNumber !== currentStop) {clearInterval(interval);}}, [currentStop]);};
答案1
得分: 1
使用 ref 来存储间隔 ID。
let interval = useRef();// 启动 setInterval：interval.current = setInterval(...);// 停止 setInterval：clearInterval(interval.current);
英文:
Use a ref to store the interval id instead.
let interval = useRef();// to start the setInterval:interval.current = setInterval(...);// to stop the setInterval:clearInterval(interval.current);
答案2
得分: 1
将intervalId存储在一个ref中
const timerComponent = ({ stopNumber, currentStop }: Props) => {const intervalRef = useRef({intervalId: 0})// 在定时器上更新已经过去的时间useEffect(() => {if (stopNumber === currentStop) {intervalRef.current.intervalId = setInterval(() => {console.log('计时器正在运行');}, 3000);// 在卸载时清除定时器return () => clearInterval(intervalRef.current.intervalId);}}, []);// 清除正在运行的定时器useEffect(() => {if (stopNumber !== currentStop) {clearInterval(intervalRef.current.intervalId);}}, [currentStop]);};
英文:
Store the intervalId on a ref instead
const timerComponent = ({ stopNumber, currentStop }: Props) => {const intervalRef = useRef({intervalId: 0})// Update elapsed on a timeruseEffect(() => {if (stopNumber === currentStop) {intervalRef.current.intervalId = setInterval(() => {console.log('timer is running');}, 3000);// Clear interval on unmountreturn () => clearInterval(intervalRef.current.intervalId);}}, []);// Clear timers that were runninguseEffect(() => {if (stopNumber !== currentStop) {clearInterval(intervalRef.current.intervalId);}}, [currentStop]);};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论