20 - 节流点击指令

[shenrui1]

// 你的答案

<script setup lang="ts">
/**
 * 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`
 *
 */
let timeoutId = null;

const VDebounceClick = {
  mounted(el, { value, arg }) {
    el.addEventListener('click', () => {
      if (!timeoutId) {
        value();
        timeoutId = setTimeout(() => {
          clearTimeout(timeoutId);
        }, arg);
      }
    });
  },
  beforeUnmount(el, { value }) {
    clearTimeout(timeoutId);
    el.removeListener('click', value);
  },
};

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>