触发一次后删除 Scroll EventListener

Question

在我的 React 项目中，我有一个滚动事件侦听器，用于检查用户滚动何时超过 590，将状态设置为 true。这似乎工作正常但是我只想要与运行关联的函数一次所以我添加 removeEventListener 如下所示，但是事件继续触发。

如何适当地删除这个事件侦听器？

useEffect(() => {
    const handleNavSlide = () => {
      if (window.scrollY > 590) {
        setIsOpen(String(true))

        setTimeout(() => {
          setIsOpen(String(false))
        }, 2000)
      }
    }

    window.addEventListener("scroll", handleNavSlide)
    return () => window.removeEventListener("scroll", handleNavSlide)
  }, [])

Answer 1

这会发生，因为根据您的 依赖项数组 （此处为 []），您的侦听器只会在组件卸载时被删除。对于 once 行为，像这样更改您的实现：-

useEffect(() => {
    const handleNavSlide = () => {
      if (window.scrollY > 590) {
        setIsOpen(String(true))

        setTimeout(() => {
          setIsOpen(String(false))
        }, 2000)
        window.removeEventListener("scroll", handleNavSlide)
      }
    }

    window.addEventListener("scroll", handleNavSlide)
  }, [])

触发一次后删除 Scroll EventListener

Remove Scroll EventListener After Firing Once

javascript

reactjs

events

removeeventlistener