通过反应清除悬停间隔

Question

我有一个旋转木马，其

useEffect

挂钩中有一个间隔，可以触发自动滑动。只要我将鼠标悬停在整个部分上，我就想停止自动滑动。

useEffect(() => {
    const timer = setInterval(() => {
        paginate(1)
    }, 3000)
    return () => clearInterval(timer)
})

return (
    <div>
        // the carousel
    </div>
)

当我试图将

timer

功能从挂钩中取出时，转盘会疯狂并随机滑动......

这可能是之前提出的问题的副本，但我没有找到任何关于react的信息。

我该怎么做才对？

Answer 1

您可以做的就是使用

setTimeout

来代替，每

timer

毫秒更新一个状态变量

n

，以及一个将停止计时器递减的状态变量

hover

  const [timer, setTimer] = useState(3000);
  const [hover, setHover] = useState(false);

  useEffect(() => {
    if (hover) return;
    setTimeout(() => {
      if (timer <= 0) {
        setTimer(3000);
        paginate(1);
      } else setTimer(timer - 100)
    }, 100)
  }, [timer, hover])