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

Question

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

  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

为了确保只添加一次监听器，我做的一件事是在每个 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 2

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

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

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

这是删除事件侦听器的理想选择。您可以参考 React useEffect 挂钩页面上的清理部分：https://reactjs.org/docs/hooks-effect.html

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]);

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

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

Prevent Event Listener firing event multiple times

javascript

dom-events

reactjs