解决ReactHooks中使用loadsh的防抖不生效

• 需求
  当滚动鼠标时候请求接口，需要防抖处理，避免大量请求。

• 问题
  ReactHooks中使用loadsh的防抖不生效，没有调用debounce函数。

• 代码如下

  // 缩放时间轴事件
  const onTimeScaleScaling = (totalTime: number) => {
    _.loadsh(()=>{console.log("执行防抖，0.3秒后在请求接口")，300})
  };

• 问题根因
  鼠标滚动事件使用的是ahooks的useEventListener，每次监听执行都会创建一个新的 debounce，这样防抖就不生效了。

• 解决办法

  • 方法1——使用ref来操作，因为ref不会被注销

 // 缩放时间轴事件
  const onTimeScaleScaling = (totalTime: number) => {
    debounceScaling(totalTime);
  };

  const debounceScaling = useRef(
    _.debounce(
      console.log("执行防抖，0.3秒后在请求接口"),
      300,
    ),
  ).current;

• 方法2—— useCallback

 // 缩放时间轴事件
  const onTimeScaleScaling = (totalTime: number) => {
    debounceScaling(totalTime);
  };

  const debounceScaling = useCallback(
    _.debounce(
      console.log("执行防抖，0.3秒后在请求接口"),
      300,
    ),[]
  );

THE END!