vue自定义指令(全局指令)实现防抖和节流

• 防抖:后一次顶掉前一次,并且重新计时

Vue.directive('debounce', {
  inserted: (el, binding) => {
    let [fn, event = 'click', time = '1000'] = binding.value
    let timer
    el.addEventListener(event, () => {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
          fn(el.value)
        }, time)
    })
  }
})

• 节流:一段时间内,只执行一次(节流结束会执行节流期间最后一次事件)

Vue.directive('throttle', {
  inserted: (el, binding) => {
    let [fn, event = 'click', time = '1000'] = binding.value
    let timer, timeEnd
    el.addEventListener(event, () => {
      if (timer) {
        timeEnd = new Date().getTime()
        if (timeEnd - timer > time) {
          fn(el.value)
          timer = timeEnd
        }
      } else {
        fn(el.value)
        timer = new Date().getTime()
      }
    })
  }
})