为何使用_.debounce时需单独定义函数才能生效？

这是类组件中使用防抖时非常典型的坑，我来给你把逻辑拆解得明明白白：

先搞懂你之前写法不生效的原因 #

假设你之前的代码是类似这样的：

// 不生效的写法
handleKeyPress = (e) => {
  // 每次按键触发时，都会创建一个全新的debounce包装函数
  _.debounce(() => {
    console.log("处理按键逻辑");
  }, 300)(e);
}

问题出在：每次触发handleKeyPress，你都调用了一次_.debounce()，这会生成一个全新的防抖包装函数。每个新的包装函数都有自己独立的定时器和状态，相当于每次按键都重新“启动”一次防抖计时，完全达不到“合并短时间内多次触发”的效果——就像你每次按按键都换了一个新的计时器，自然不会帮你过滤重复触发。

定义为类实例方法为什么能解决问题 #

当你把debounceKeyFunc定义为类的实例方法时，本质是提前创建好唯一的防抖包装函数，并把它挂载到类实例上，比如：

class YourComponent extends React.Component {
  // 初始化时只创建一次防抖包装函数
  debounceKeyFunc = _.debounce((e) => {
    console.log("处理按键逻辑");
  }, 300);

  handleKeyPress = (e) => {
    // 每次按键都调用同一个防抖包装函数
    this.debounceKeyFunc(e);
  }
}

这里的核心逻辑是：

1. _.debounce()只会在类实例初始化时执行一次，生成一个带有内部状态（定时器ID、上次触发时间）的包装函数；
2. 每次按键触发handleKeyPress时，调用的都是同一个包装函数，它能记住上一次触发的时间，判断当前是否在防抖等待期内，从而正确决定是否执行你的按键处理逻辑。

简单来说：防抖需要复用同一个“状态容器”（也就是debounce返回的包装函数），而类实例方法刚好帮你固定了这个函数引用，让状态得以持续维护。

额外提醒：这些写法也会踩坑 #

除了直接在事件回调里创建debounce函数，还有两种常见错误写法：

• 在render()方法里绑定防抖函数：每次组件render都会生成新的包装函数，同样失效；
• 用箭头函数直接写在事件绑定属性里（比如onKeyPress={() => _.debounce(...)()}）：和第一种错误一样，每次触发都会新建防抖函数。

内容的提问来源于stack exchange，提问作者Joey Yi Zhao