实现 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 = false
10            }, 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}

导入到组件中使用