如何限制 React 功能组件中的 onWheel 事件

Question

我有这个 Reactemphasized text 组件，我想在 wheel 事件发生时做一些事情。但我也想限制车轮事件并确保只有一个事件会触发该功能两秒钟。我正在使用 lodash 库中的 throttle 函数。

但是，它仍然会触发很多事件，并且所有事件都会被执行。我认为原因是每个车轮事件都会产生一个独特的节流函数。但我不知道如何解决问题并使其按预期工作。谁能给我提供任何可能的解决方案？

如有任何意见，我们将不胜感激。

  const changePage = (direction) => {
    if (direction > 0) {
      console.log("scroll down");
    } else {
      console.log("scroll up");
    }
  };
  const onWheel = (event) => {
    changePage(event.deltaY);
  };
    
  <div className="name" onWheel={_.throttle(onWheel, 2000)} >

Answer 1

您可以将 useMemo 与空的依赖项数组一起使用，这样 _.throttle 只会在挂载时调用一次：

const changePage = (direction) => {
  if (direction > 0) {
    console.log("scroll down");
  } else {
    console.log("scroll up");
  }
};
const onWheel = (event) => {
  changePage(event.deltaY);
};
const onWheelThrottled = useMemo(() => _.throttle(onWheel, 2000), []);

<div className="name" onWheel={onWheelThrottled} >

实时片段：

console.error = () => void 0;
const App = () => {
  const changePage = (direction) => {
    if (direction > 0) {
      console.log("scroll down");
    } else {
      console.log("scroll up");
    }
  };
  const onWheel = (event) => {
    changePage(event.deltaY);
  };
  const onWheelThrottled = React.useMemo(() => _.throttle(onWheel, 2000), []);
  return <div className="name" onWheel={onWheelThrottled} />
};
ReactDOM.render(<App />, document.querySelector('.react'));

.name {
  height: 3000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

如何限制 React 功能组件中的 onWheel 事件

How to throttle onWheel events in a React functional component

javascript

throttling

reactjs