20 - 节流点击指令

[Wants1203]

// 你的答案
<script setup lang='ts'>

function debaunce(func: Function, wait: number) {
  let timer: number | undefined;
  return (args) => {
    if (timer) return
    func.call(this, args)
    timer = setTimeout(() => {
      clearTimeout(timer)
      timer = null
    }, wait)
  }
} 

const VDebounceClick = {
  mounted: (el, { arg: delay, value: callback }: { arg: number, value: Function }) => {
    el.addEventListener('click', debaunce(callback, delay))
  },
  unmounted: (el, { arg: delay, value: callback }: { arg: number, value: Function }) => {
    el.removeEventListener('click', debaunce(callback, delay))
  }
}

function onClick() {
  console.log("Only triggered once when clicked many times quickly")
}

</script>

<template>
  <button v-debounce-click:200="onClick">
    Click on it many times quickly
  </button>
</template>