自定义防抖指令 v-debounce-click:1000

<script setup lang='ts'>
import {ref} 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 testRef = ref('1')
const VDebounceClick = {
		mounted:(el,binding)=>{
    let {arg:time,value:fn}= binding
    	el.addEventListener('click',debounce(fn,time))
    }
}

function debounce(fn,delay){
	let time = null
  return function(){
  	if(time) clearTimeout(time)
    time = setTimeout(()=>{
    	fn.apply(this,arguments)
    },delay)
  }
}
function throttle(fn,delay){
	let sign = true
  return function(){
  	if(!sign) return
    sign = false
    setTimeout(()=>{
    	fn.apply(this,arguments)
      sign = true
    },delay)
  
  }
}

function onClick() {    
    testRef.value=testRef.value +'1'
  console.log("Only triggered once when clicked many times quickly")
}

</script>

<template>
  <button v-debounce-click:1000="onClick">
    Click on it many times quickly
  </button>
  <div>{{testRef}}</div>
</template>