20 - v-debounce-click

[saltand]

<script setup>
/**
 * 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 = {
  created(el, binding) {
    const { value: cb, arg: delay } = binding
    const debounced = debounce(cb, delay)
    el.addEventListener('click', debounced)
    el._debounced = debounced
  },
  unmounted(el) {
    if (el._debounced) {
      el.removeEventListener('click', el._debounced)
      el._debounced = null
    }
  },
}

function debounce(fn, delay) {
  let timer = null
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(fn, delay)
  }
}

function onClick() {
  console.log('Only triggered once when clicked many times quickly')
}
</script>

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