vue自定义指令如何监听点击间隔时间

背景

在页面上有个地方不能频繁点击，如果直接用debounce防抖处理是可行的，但是不能提示给用户，所以写一个自定义指令来提示用户点击频率。

思路

只需要监听元素点击事件，获取到点击事件两次间隔时间戳的差值就可以了，然后根据差值和需要判定的时间进行比较，给出提示。

实现

import Vue from 'vue'
import {Message} from 'element-ui'

Vue.directive('listenInterval', {
  bind: (el, binding) => {
    let throttleTime = binding.value
    if (!throttleTime) {
      throttleTime = 1000 // 初始化点击间隔
    }
    let prevTimeStamp
    // 获取两次点击事件的时间
    // 两次点击间隔在throttleTime时间范围内则提示
    el.addEventListener('click', event => {
      if (!prevTimeStamp) {
        prevTimeStamp = event.timeStamp
      } else {
        const nextTimeStamp = event.timeStamp
        if (parseInt(nextTimeStamp - prevTimeStamp) < parseInt(throttleTime)) {
          Message.warning(`点击时间间隔应大于${throttleTime / 1000}s`)
        } else {
          prevTimeStamp = undefined
        }
      }
    }, true)
  }
}) 

效果