VUE自定义函数去抖

VUE自定义函数去抖

一般情况下用lodash就可以了，但是公司内网源包没那么丰富，于是自己手写一个记录一下。
在main.js里加入

// 记录函数去抖的已触发函数
const debounceDict = {}
Vue.prototype.debounceDict = debounceDict

// funKey: 需要去抖函数的唯一表示，fun：函数体， params函数入参
Vue.prototype.debounce = function(funKey, fun, ...params) {
  // console.log('debounce')
  let keys = []
  for (let kk in this.debounce) {
    keys.push(kk)
  }
  if (keys.indexOf(funKey) === -1) {
    const id = setTimeout(() => {
      delete this.debounceDict[funKey]
      fun(...params)
    }, 300)
    this.debounce[funKey] = id
  } else {
    clearInterval(this.debounce[funKey])
    const id = setTimeout(() => {
      delete this.debounceDict[funKey]
      fun(...params)
    }, 300)
    this.debounce[funKey] = id
  }
}

在需要用到的时候，比如自定义loadMore

Vue.directive('loadMore', {
  bind(el, binding) {
    // 获取element，定义scroll
    let selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    selectDom.addEventListener('scroll', function () {
      let height = this.scrollHeight - this.scrollTop <= this.clientHeight + 2
      if (height) {
        binding.value()
      }
    })
  }
})

用的时候传一个唯一识别字符串，函数本体和入参

v-loadMore=debounce('filter', filterFun,input1, input2')