调用clearInterval后，setInterval继续运行

Question

这是一段代码：

var interval3 = null;
React.useEffect(() => {
if(running) {
if(interval3) clearInterval(interval3);    
interval3 = setInterval(() => {
console.log('running')
}, 1000);}
else {
clearInterval(interval3)
}  

}, [running]);

我检查了其他帖子中建议的解决方案，但没有一个有效。

Answer 1

您可以使用状态值来跟踪和保持间隔的id。查看下面的详细信息。

const [id, setId] = useState(null);
useEffect(() => {
if (running) {
if (id) return;
const intervalId = setInterval(() => {
console.log('running');
}, 1000);
setId(intervalId)
} else {
setId(null);
clearInterval(id);
}
}, [running, id]);