20 - 节流点击指令

[MaftyNavue-Erin]

<script setup lang='ts'>

import { handleError } from 'vue'

/**
 * Implement the custom directive
 * Make sure the `onClick` method only gets triggered once when clicked many times quickly
 * And you also need to support the debounce delay time option. e.g `v-debounce-click:ms`
 *
*/

const VDebounceClick = {
  mounted(el, binding) {
    let timeoutId = null;

    const clickHandler = () => {
    
    clearTimeout(timeoutId)

    timeoutId = setTimeout(() => {
      binding.value();
    }, binding.arg || 300)
    }
 
    el.addEventListener("click", clickHandler);

    el._handler = clickHandler
  }, 
  unmounted(el) {
    el.removeEventListener("click", el._handler);
  }
}

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>