如何使用useEffect React每3秒执行一次滚动功能

Question

我正在尝试构建一个组件，自动滚动通过一些列表，向前，然后向后。

const [clicks, setClicks] = useState(numOfClicks)
const [goingUp, setGoingUp] = useState(true)
const scroll = () => {
if (goingUp) {
elementsRef.current[current + 1].current.scrollIntoView();
setCurrent(current + 1);
setClicks(clicks - 1);
} else {
elementsRef.current[current - 1].current.scrollIntoView();
setCurrent(current - 1);
setClicks(clicks - 1);
}
}

如果clicks达到0，则列表处于末尾，然后它翻转并向后移动，直到到达开始，然后循环重复。

useEffect(() => {
if (clicks === 0) {
setGoingUp(!goingUp);
setClicks(numOfClicks);
}
}, [clicks])

到目前为止，通过点击事件工作得很好。我的最后一个阶段是间隔一段时间后在组件内自动执行scroll。为此，我使用了额外的useEffect

useEffect(() => {
const interval = setInterval(() => {
scroll()
}, TIMER);
return () => clearInterval(interval); // This represents the unmount function, in which you need to clear your interval to prevent memory leaks.
}, [])

函数运行一次，然后不再运行。虽然如果我在效果中添加console.log，我看到间隔实际上是有效的。

Answer 1

clearInterval导致setInterval在3 sec,it only run once之后停止，将clearInterval放入一个条件中，该条件将指定何时停止

useEffect(() => {
const interval = setInterval(() => {
scroll()
}, TIMER);
return () => clearInterval(interval); 
}, [clicks])