自定义指令-节流

兼顾型节流：第一次会马上执行，最后一次也会执行。 event：按钮对应的事件 throttleTime：事件执行的间隔事件 throttleText：事件未执行时的提示

function handleClick (el, binding) {
  let timeoutID
  let lastExec = 0
  const delay = binding.value?.throttleTime || 3000
  return function () {
    const elapsed = Number(new Date()) - lastExec
    function exec () {
      lastExec = Number(new Date())
      binding.value?.event()
    }
    clearTimeout(timeoutID)
    if (elapsed > delay) {
      exec()
    } else {
      Message(binding.value?.throttleText || '操作进行中，请稍后再试')
      timeoutID = setTimeout(exec, delay - elapsed)
    }
  }
}

const throttle = {
  inserted (el, binding) {
    if (!binding.value) {
      return
    }
    el.addEventListener('click', handleClick(el, binding))
  }
}

export default throttle