【记】Vue中使用防抖函数所遇见的坑

以前的防抖和节流都是在js中直接书写，后使用vue进行组件化开发之后，有些地方需要注意。

正常写法

    function debounce(func, delay) {
     
      let timeout
      return function () {
     
        let context = this;
        let args = arguments;
        if (timeout) {
     
          clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
     
          func.apply(context, args)
        }, delay)
      }
    }

使用

    function change(volume, data) {
     
      debounce(() => {
     
        console.log('change', volume, data);
      }, 500)
    }

---

Vue中写法使用

注意: Vue中使用时，需要定义timeout，同时在防抖函数中，this的指向发生了变化，需要在return之前获取vue实例。这个时候，你直接使用，还是不行的，只要debug就会发现debounce返回的func没有进去，需要手动执行一下(添加括号)。

  data() {
     
    return {
     
      timeout: null
    }
  }

    change(volume, data) {
     
      this.debounce(() => {
     
        console.log('change', volume, data)
      }, 500)
    },
    debounce(func, delay) {
     
      let context = this // this指向发生变化，需要提出来
      let args = arguments
      return function () {
     
        if (context.timeout) {
     
          clearTimeout(context.timeout)
        }
        context.timeout = setTimeout(() => {
     
          func.apply(context, args)
        }, delay)
      }()// 注意:我加了()
    }

Vue中的watch的防抖简写

    watchObj: {
     
      handler(val) {
     
        let _this = this
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
     
          _this.handlerData(val)
        }, 500)
      }
    }