这里先贴出代码

// 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回来的函数,所以函数不会被执行
Logo

前往低代码交流专区

更多推荐