防止事件侦听器多次触发事件

Question

我正在使用此事件侦听器来触发一个事件，该事件基本上更新了 useEffect 中的 Interval 状态，并使我能够在表中上下移动。上下方法对我来说效果很好，但它会多次触发事件。导致顶部和向下事件的多次触发事件的速度很慢，并且会减慢所有应用程序的速度。

  useEffect(() => {
    console.log("HAAN MEI WUHI PAPPI HUN");
    document.addEventListener("keyup", (e) => {
      if (e.shiftKey && e.code === "ArrowRight") {
        console.log("shift + right", vjsRef.current.currentTime);
        vjsRef.current.currentTime = vjsRef.current.currentTime + 1;
      } 
      else if (e.shiftKey && e.code === "ArrowLeft") {
        console.log("fire! left", vjsRef.current.currentTime);
        vjsRef.current.currentTime = vjsRef.current.currentTime - 1;
      }
    });

    document.addEventListener("keyup", async(event) => {
      if (event.code === "ArrowUp") {
        console.log('aj mei upar ');
        await props.setSelectInterval(props.selectInterval - 1);
      }
      if (event.code === "ArrowDown") {
        if (props.selectInterval + 1 < props.row.length) {
          console.log('asmaan nichay');
          props.setSelectInterval(props.selectInterval + 1);
        }
      }
    });
  }, []);

Answer 1

为了避免 React 从一个 useEffect 钩子添加多个事件监听器，您可以返回一个清理函数来删除 useEffect 钩子中的事件监听器。每当组件卸载时，清理函数就会运行。例如：

useEffect(() => {
        const yourFunction = () => {console.log('hi')}
        document.addEventListener('keyup', yourFunction)

        return () => {
            document.removeEventListener('keyup', yourFunction)
        }
    }, [])

这非常适合删除事件侦听器。您可以参考 React useEffect hook 页面上的清理部分： https://reactjs.org/文档/hooks-effect.html

Answer 2

为了确保监听器只添加一次，我做的一件事是在每个 addListener 之前调用removeEventListener

console.log("HAAN MEI WUHI PAPPI HUN");
var foo = (e) => {
  if (e.shiftKey && e.code === "ArrowRight") {
    console.log("shift + right", vjsRef.current.currentTime);
    vjsRef.current.currentTime = vjsRef.current.currentTime + 1;
  } 
  else if (e.shiftKey && e.code === "ArrowLeft") {
    console.log("fire! left", vjsRef.current.currentTime);
    vjsRef.current.currentTime = vjsRef.current.currentTime - 1;
  }
}
document.removeEventListener("keyup", foo);
document.addEventListener("keyup", foo);

Answer 3

useEffect(() => {
    var foo1 = (e) => {
      if (e.code === "ArrowUp") {
        if (props.selectInterval - 1 >= 0) {
          props.setSelectInterval(props.selectInterval - 1);
        }
      }
      if (e.code === "ArrowDown") {
        if (props.selectInterval + 1 < props.row.length) {
          props.setSelectInterval(props.selectInterval + 1);
        }
      }
    };
    document.addEventListener("keyup", foo1);
return () => {
      document.removeEventListener("keyup", foo1);
    };
  }, [props.selectInterval]);

嗯，这对我有用！感谢以上两位贡献者！