vue防重复点击的几种实现

前言

项目开发过程中发现，在手速快的情况下，vue的组件点击事件会被连续触发多次。这个问题会产生一些意想不到的bug。
下面我们提供几种解决办法

一、使用js 防抖配合vue自定义指令实现。

vue组件代码

二、只使用debounce函数

定义common.js公共方法文件

/**
 * 函数防抖
 */
export function debounce(fn, delay) {
 // 记录上一次的延时器
 var timer = null;
 var delay = delay || 200;
 return function() {
  var args = arguments;
  var that = this;
  // 清除上一次延时器
  clearTimeout(timer)
  timer = setTimeout(function() {
    fn.apply(that,args)
  }, delay);
 }
}

vue组件引入common.js

import {debounce} from '../common/common.js'

vue组件代码

以上两种方式存在的问题
以上两种方式实现的核心逻辑都是使用debounce的思想，只是使用方式上的不同。
这两种方式已经基本上能满足防重复点击的需求，但实际测试发现延时的时间不好控，如果延时时间短（<150ms）快速点击还是会有几率多次触发事件。延时时间长(>600ms),用户点击后会有个明显的延时过程才能触发事件，用户体验就不太好。

首先明确下我们想要实现的效果。

1. 用户在按下按钮的时候立即触发点击事件。
2. 用户在快速连续按下按钮的时候只触发第一次的点击事件。
3. 用户不间断疯狂点击按钮（暴力测试），也只是立即触发第一次的事件，在疯狂点击的过程中不会触发事件，即使超时时间已经过去。

三、最终解决方案 lodash

哎呀，这库真香啊，官网地址奉上 lodash
我们这里不展开分析这个库，只用这个库来实现防重复点击的需求。
不多说直接上代码吧。

安装lodash

npm i --save lodash

组件中引入

import _ from "lodash"

官方也是习惯将这个库命名为下划线，是不是很与众不同，可能是为了防重名吧，这里不多探讨。

vue组件完整实现

lodash的debounce的关键配置就是 leading trailing
关于这两个属性的具体解释可以参照lodash官方文档。