记一次在Vue中使用debounce遇到的坑

Debounce，又称防抖动函数，常被被用来控制前端异步请求及其它高耗任务的频率。

概念比较抽象，了解一个业务场景，就很容易理解了。

比如通过搜索过滤一个列表，通过“@change=“search”监听输入向后台发起请求，如果每输入一个字母就调用一次”search“向后台发送一次请求，效率将会很低，如果可以将调用search函数控制在一定时间内，比如1秒内，在这一秒钟，我输入了5个字母，search函数被调用了5次，但是只向后台发送一次请求，是不是效率就会提升很多，不需要频繁调接口。

<el-input placeholder="输入关键字进行查询"
          v-model="searchText"
          @keyup.native="search"></el-input>


methods: {
  search () {
      console.log("此处向后台发起请求")
  }
},

而debounce函数就是解决这个问题的，顾名思义，debounce是“去抖动”的意思，结合以上的业务场景就很形象，一段时间内输入值的变化都是“抖动”，不是要真正向后台发请求的真正“动作”，为了让后台不被骚扰，我把这些“抖动”的小动作都屏蔽掉。

然而，在学习使用debounce函数的过程中，我踩了好几个坑，分享出来以供借鉴。

我使用的是lodash自带的debounce函数，官方文档这样描述的

_.debounce(func, [wait=0], [options={}])

两个必选参数中，第一个是防抖动的函数，第二个是防抖动的时间毫秒数。很像“setTimeout”函数的写法。

于是我将代码写成：

// 错误示例
methods: {
  search () {
    this._.debounce(() => {
      console.log('此处向后台发起请求:' + this.searchText)
    }, 1000)
  }
}

控制台既没有报错，也没有打印出任何东西，后来经同事提醒，发现debounce函数的返回值是一个function，跟setTimeout使用是不一样的

Returns
(Function): Returns the new debounced function.

于是，我将代码改为，在debounce后面加了个（），让这个返回的函数立即执行

// 错误示例
methods: {
  search () {
    this._.debounce(() => {
      console.log('此处向后台发起请求:' + this.searchText)
    }, 1000)()
  }
},

这次，控制台终于打出了我想要的结果，但是。。。但是，并没有起到防抖动的作用，我在一秒钟按几次键盘，就打印出多少条数据，只是会有1秒的延迟，更想象中的效果不一样。

后台看了Vue的官方实例，修改代码为，得到了我想要的效果，即以一秒钟为单位，控制台输入input里的值，多余的被判定为“抖动”的输入，不会在控制台打印。

// 正确示例

//  加载到vue原型链上的lodash在method函数后的定义的地方取不到，重新引了一遍
import _ from 'lodash'
export default {
    methods: {  
      // 加载到原型链上的lodash，在getRemote后取不到
       // 注意，这里debounce中的第一个参数，不能写成箭头函数，否则，取不到this
      getRemote: _.debounce(function () {
        console.log('此处向后台发起请求:', this.searchText)
      }, 1000),
      search () {
        this.getRemote()
      }
    }
}

得到想要的结果，但是还是留了三个疑问：
1.为什么在main.js中引入Vue原型链上的lodash在getRemote后不能用？
2.为什么getRemote的debounce第一个参数写成箭头函数就取不到this？
3.最后一个正确示例和倒数第一个错误示例的写法，原理上的区别是什么？

记一次在Vue中使用debounce遇到的坑

推荐阅读更多精彩内容