记录一次debounce使用出错问题

问题描述

在一次class组件内使用debounce时，出现debounce无法生效情况。修改前代码如下

<input type="text" placeholder="请输入内推码（选填）" value={pushCode} onChange={this.onChange}/>

onChange = (e) => {
    this.props.actions.InputValueChangeAction(e.target.value)
    _debounce(() => {
        console.log(33333);
    }, 200)
}

此时的我们希望用户输入时200毫秒内有重复输入不会打印相应值。但是实际情况却是没有任何输出

问题解决

以上用法一定一定是错误的。 首先_.debounce返回值是个函数，以上写法，这个函数都没有执行，当然不会触发控制台的打印。 那我们将代码修改为

onChange = (e) => {
    this.props.actions.InputValueChangeAction(e.target.value)
    const fn = _debounce(() => {
        console.log(33333);
    }, 200)
    fn()
}

本以为这样就会可以。实际情况却是，用户每次输入都会在控制台打印出信息。为何debounce失效了？ 其实是我们用法错了。正确写法如下

onChange = (e) => {
    this.props.actions.InputValueChangeAction(e.target.value)
    this.debouncechangeRecommendName()
  }

debouncechangeRecommendName = _.debounce(() => {
console.log(33333);
}, 1000)

这个debounce返回的函数一定要是同一个，这样debounce内部才能通过clearTimeout去清除上一次的计时器。 如果用上面的写发，每次都是生成一个新的fn，这样debounce当然失效了。达到的效果仅仅是每次延迟200毫秒打印。