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

Question

我有这个 React强调文本 组件，当车轮事件发生时我想做一些事情。但我也想限制车轮事件并确保只有一个事件会触发该功能两秒钟。我正在使用 lodash 库中的油门函数。

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

任何 cmets 将不胜感激。

  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} >

直播sn-p：

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>