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

原创已于 2023-12-20 19:30:56 修改 · 488 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-12-16 21:25:14 首次发布

文章介绍了如何在Vue.js中实现一个名为v-debounce-click的自定义指令，该指令确保在短时间内多次点击时，只触发一次事件处理函数，并支持延迟时间选项。通过debounce和throttle函数来控制事件执行频率。

<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>