防抖函数在Vue中的应用

这里先贴出代码

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

说明：这个节流函数也是我在网上找的，但是我直接调用执行是不起作用的，原因是有些代码有错误，还有就是要修改某些参数的和this的指向。
下面是我修改之后的代码

debounce1(func, wait = 500) {
      // 这个定时器一定不能是这个函数私有的，一定是要放在Data中，如果
      // 没有放在data中则会出现点击几次就触发几次，虽然说点击后确实会延迟执行，但是没有起到节流应该有的效果
      // let timer = this.timer
      // debugger
      // 这里返回的函数是每次用户实际调用的防抖函数
      // 如果已经设定过定时器了就清空上一次的定时器
      // 开始一个新的定时器，延迟执行用户传入的方法
      // 这里的this一定要保存副本！！！！！！
      var _this = this
      return function(...args) {
        if (_this.timer) clearTimeout(_this.timer)
        // console.log('77')
        _this.timer = setTimeout(() => {
          func.apply(_this, args)
        }, wait)
      }
    },

对修改之后的代码说明：

1. 我把timer设置在data中，这样就可以保存这个变量的值，我已经试过了，如果没有放到data中会出现点击多少次按钮就执行多少次的情况，虽然执行的时候会实现延迟执行的效果
2. this的指向， 在return函数中，需要修改this的执行，这里我用_this保存了this（Vue的实例），然后我用里面的timer我并没有用变量存放其他，因为存放起来的话就起不到‘共有’这个作用了，而且代码会执行不了
3. 在调用之后，记得要在末尾加上（），不然就根本没调用return回来的函数，所以函数不会被执行