需求
当滚动鼠标时候请求接口，需要防抖处理，避免大量请求。问题
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!
