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)
  }, [])

触发一次后删除滚动事件监听器

1 个答案: