实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次

实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次

1. 自定义指令

利用元素的 disabled 属性，新建自定义指令，preventClick.js

1export default { 2 install(Vue) { 3 Vue.directive('preventClick', { 4 inserted(button, bind) { 5 button.addEventListener('click', () => { 6 if (!button.disabled) { 7 button.disabled = true; 8 setTimeout(() => { 9 but.disabled = false10 }, 2000)11 }12 })13 }14 })15 }16}

在 main.js 中引入

组件中使用

2. 防抖函数

函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，直到函数请求停止并超过时间间隔才会执行。

1export function debounce(fn, delay = 2000) { 2 // 记录上一次的延时器 3 var timer = null; 4 return function() { 5 var args = arguments; 6 var that = this; 7 // 清除上一次延时器 8 clearTimeout(timer) 9 timer = setTimeout(function() {10 fn.apply(that,args)11 }, delay);12 }13}

导入到组件中使用

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。