使用防抖节流犯的低级错误

场景是这样的 有一个v3拖拉组件组 当拖动时会回调一个方法 进行整体布局的计算

最最初是这样写的

methods: {
    drag_handleBackLayout(newLayout, height) {
      if (this.gridState.resizing) {
        throttle(() => {
          this.drag_changeBackGroundGridRows(height)
        }, 50)()
      }
      debounce(() => {
        this.saveDisabled = false
        if (!this.gridState.resizing) this.drag_changeBackGroundGridRows(height)
      }, 100)()
    },
}

发现毛用没有 函数根本没有起到作用

然后尝试使用方案2

  methods: {
    ...
     // 移动、拉伸卡片时重新计算背景网格数据
    drag_handleBackLayout(newLayout, height) {
      // 执行防抖函数
      this.drag_debounceForResize()
      // 执行节流函数
      this.drag_debounceForComputed()
    }
    ...
  }

开始时我采用了最笨但是管用的写法

  data() {
    return {
      // 初始化节流函数
      drag_debounceToComputed: this.drag_debounceForComputed(),
      // 初始化防抖函数
      drag_debounceToResize: this.drag_debounceForResize()
    }
  }，
  methods: {
 // 防抖函数
    drag_debounceForResize() {
      return throttle(this.drag_changeBackGroundGridRows, 50)
    },
    // 节流函数
    drag_debounceForComputed() {
      return debounce(({ height, newLayout, resizing, oldLayout }) => {
        if (!resizing) this.drag_changeBackGroundGridRows(height)
        // 对比新旧数据是否相同 管理工作台保存按钮是否禁用
        this.saveDisabled = this.template_compareLayoutData(newLayout, oldLayout)
        // 保存localStorage信息 并根据状态渲染背景网格
        localStorage.setItem('personalComptsList', JSON.stringify(newLayout))
      }, 5);
   }，
   drag_handleBackLayout(newLayout, height) {
      // 执行防抖函数
      this.drag_debounceToResize(height)
      // 执行节流函数
      this.drag_debounceToComputed({ height, newLayout, resizing, oldLayout })
   }
}

这种方式没问题使用闭包创建了属性 整个生命周期只会调用一次初始化后的这个节流函数
但是经过我时间加搜索 发现可以简化下逻辑 用更易懂的写法来编写

然后尝试使用方案3

methods:{
  // 移动、拉伸卡片时重新计算背景网格数据
  drag_handleBackLayout(newLayout, height) {
    this.drag_debounceForResize(height)
    // 执行节流函数
    this.drag_debounceForComputed({
      height,
      newLayout,
      resizing,
      oldLayout
    })
  },
  // 防抖函数
  // 保证防抖节流函数在整个生命周期中返回同一个函数
  // 注:使用匿名函数 并且无需使用bind绑定this methods声明的方法vue会自动编定到this上
  // 使用箭头函数会找不到this 箭头函数是被创建时的上下文确认this 那this指向的是函数drag_handleBackLayout
  drag_debounceForResize: throttle(function (height) {
    this.drag_changeBackGroundGridRows(height)
  }, 50),
  // 节流函数
  drag_debounceForComputed: debounce(function({ height, newLayout, resizing, oldLayout }) {
      this.saveDisabled = this.template_compareLayoutData(newLayout, oldLayout)
  }, 5),
}

注:使用匿名函数 并且无需使用bind绑定this methods声明的方法vue会自动编定到this上
使用箭头函数会找不到this 箭头函数是被创建时的上下文确认this 那this指向的是函数drag_handleBackLayout