时间戳

首页 > 解决方案 > 反应取消 clearTimeout 在 useEffect 上无法正常工作

reactjs - 反应取消 clearTimeout 在 useEffect 上无法正常工作

问题描述

https://codepen.io/evan-jin/pen/qBjGWvR

  const [hoverItem, setHoverItem] = useState(null)
  const timerRef = useRef(null)
  
  const addcursor = useCallback(() => {
    console.log('addcursor')
    clearTimeout(timerRef.current)
    timerRef.current = null
    
    timerRef.current = setTimeout(() => {
      document.body.style.cursor = 'wait'
    }, 10)
  }, [])
  
  const removeCursor = useCallback(() => {
    if (timerRef.current === null) return
    console.log('removeCursor')
    
    timerRef.current = setTimeout(() => {
      document.body.style.cursor = 'default'
    }, 500)
  }, [])
  
  useEffect(() => {
    if (hoverItem) {
      addcursor()
    } else {
      removeCursor()
    }
  }, [hoverItem])

当我将鼠标悬停在框 div 上时，我想保持“等待光标”，但是当我停止移动光标时触发 setTimeout。

我尝试在 useEffect return(willUnmount) 上使用 clearTimeout 但不起作用。

如果我在每个盒子组件上进出它，但如果我将光标快速移动到另一个，它最终会触发 RemoveCursor setTimeout。

总结一下，

  1. 当我将光标移出时，我想将“等待光标”保持 500 毫秒
  2. 通过框后，如果光标在框上，“等待光标”需要留在框上，但不仅仅是消失

这个问题看起来很奇怪，但我只是为我的真实项目提出了这个简单的问题，请任何人帮助我..！

标签： reactjssettimeoutcleartimeoutusecallback

解决方案

我终于找到了问题！因为我在每个项目组件中声明了 timerRef。所以每个 timerRef 都引用了每个 Item 计时器。我可以通过在父组件中声明 timerRef 来简单地解决这个问题！我将把代码留在那个链接上。谢谢你们的努力。

推荐阅读