PC

添加至main.js使用。对所有点击行为进行防抖或节流。

// 防抖处理-立即执行
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
  let timer;
  let flag = true;
  let newFunc = func
  if (event == 'click') {
    newFunc = function () {
      if(flag) {
        func.apply(this, arguments)
        flag = false
      }
      clearTimeout(timer)
      timer = setTimeout(function () {
        flag = true
      }, 500)
    }
  }
  on.call(this, event, newFunc)
}



// 防抖处理 -- 最后执行
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
  let timer
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      clearTimeout(timer)
      timer = setTimeout(function () {
        func.apply(this, arguments)
      }, 500)
    }
  }
  on.call(this, event, newFunc)
}


// 节流
const on = Vue.prototype.$on

Vue.prototype.$on = function (event, func) {
  let previous = 0
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      const now = new Date().getTime()
      if (previous + 1000 <= now) {
        func.apply(this, arguments)
        previous = now
      }
    }
  }
  on.call(this, event, newFunc)
}

微信

微信很多操作不是click换另一种实现方式。
把一般防抖中的fn替换为this[fnName]，就可以读取到Vue中的methods

/**
* 防抖forVue
*/
function VueDebounce(fnName, time, immediate){
    let timer = null;
    return function(arg){
      if(timer){
        clearTimeout(timer)
      }else{
        immediate && this[fnName](arg)
      }
      timer = setTimeout(()=>{
        timer = null;
        this[fnName](arg)
      }, time)
    }
}

/**
 * 节流forVue
 */
function VueThrottle(fnName, time, immediate){
    let timer = null;
    return function(arg){
        if(!timer){
        immediate && this[fnName](arg)
        timer = setTimeout(()=>{
            timer = null;
            immediate || this[fnName](arg)
        }, time)
        }
    }
}

// 使用的地方
methods:{
   doSth(){
    // ...do somethin
  },
  debounce:VueDebounce('doSth',1000)
}