Lodash防抖函数作为wheel事件监听器内部函数失效问题

我明白你遇到的困扰了——直接在wheel事件回调里调用_.debounce()是不会生效的，核心问题在于每次触发wheel事件时，你都在重新创建一个全新的防抖函数实例，而不是复用同一个。这样每个事件都会生成独立的防抖逻辑，完全起不到“合并频繁操作、延迟触发”的作用。

问题根源拆解 #

你之前的写法本质上是每次滚轮触发都生成新的防抖函数，就算你给函数加了执行括号，每个新函数的延迟计时都是独立的，自然达不到防抖效果：

document.addEventListener("wheel", function() {
  // 每次触发都新建防抖函数，无法复用计时逻辑
  _.debounce(function() { console.log("triggered"); }, 200);
}, true);

正确的实现方式 #

Lodash的debounce是返回一个经过防抖处理的函数，你需要提前创建好这个防抖函数实例，然后在事件回调里重复调用它，这样它才能持续跟踪事件触发间隔，正确执行防抖逻辑：

1. 先预定义防抖后的目标函数：

// 提前创建防抖函数实例，后续复用它
const debouncedScrollAction = _.debounce(() => {
  console.log("triggered");
}, 200);

2. 在wheel事件监听器里调用这个预定义的函数：

document.addEventListener("wheel", function() {
  // 每次滚轮事件触发时，调用同一个防抖函数
  debouncedScrollAction();
}, true);

额外优化建议 #

• 如果你需要在滚轮开始滚动时就立即触发一次（而非等待200ms延迟），可以添加leading: true参数：

  const debouncedScrollAction = _.debounce(() => {
    console.log("triggered");
  }, 200, { leading: true });
  

• 当页面卸载或不再需要监听时，记得调用debouncedScrollAction.cancel()取消防抖，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者leonheess