英文:
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 timer
useEffect(() => {
if (stopNumber === currentStop) {
interval = setInterval(() => {
console.log('timer is running');
}, 3000);
// Clear interval on unmount
return () => clearInterval(interval);
}
}, []);
// Clear timers that were running
useEffect(() => {
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 timer
useEffect(() => {
if (stopNumber === currentStop) {
intervalRef.current.intervalId = setInterval(() => {
console.log('timer is running');
}, 3000);
// Clear interval on unmount
return () => clearInterval(intervalRef.current.intervalId);
}
}, []);
// Clear timers that were running
useEffect(() => {
if (stopNumber !== currentStop) {
clearInterval(intervalRef.current.intervalId);
}
}, [currentStop]);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论