在工作的过程中，遇到客户骚操作，导致一起球球重复触发。为了解决这个问题，通过自定义指令实现了防抖函数，为了还替换，这里采用的指令是v-click，间隔时间是默认1s，有时间可以添加设置自定义时间。
先上代码：click.js
该函数，与传统的防抖（1s内触发1次不同），该函数只有在点击事件间隔超过1s才会触发点击事件。若想要改成（1s触发1次的），改变一下 startTime = endTime;的位置即可，原理自行百度
function throttle (fn, time) {
// console.log('节流');
// 开始时间
let startTime = 0;
// 实际上下面函数就是DOM事件回调函数
return () => {
// 结束时间: 调用当前函数的时间
const endTime = Date.now();
// fn函数的this指向问题，参数有问题（少event）
// console.log(startTime, endTime)
if (endTime - startTime >= time) {
// 大于1s, 可以触发， 小于1s就不触发
fn.apply(this, arguments);
// 重置开始时间
// startTime = endTime;（1s触发1次的）
}
startTime = endTime; （ 间隔超过1s）
}
}
export default {
/*
v-click传参方式 1. v-click=fn 2带参数的函数 v-click:fn="args"
*/ bind: (el, binding, vnode) => {
let that = vnode.context
let fn, arg, throttled
console.log(typeof that[binding.arg] == "function")
if (typeof that[binding.arg] == "function") {
fn = function (a) {
return () => {
that[binding.arg](a)
}
}
arg = binding.value
} else if (typeof binding.value === "function") {
fn = function (a) {
return binding.value
}
} else {
alert('请检查参数是否正确')
return
}
throttled = throttle(fn(arg), 1000)
console.log(throttled)
el.addEventListener("click", function () {
throttled()
}, false)
}
}
第二个文件index.js
定义了插件，已插件的方式给vue安装
import click from './click'
const install = Vue => {
Vue.directive('click', click)
}
/*
Vue.use( plugin )
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。
*/
if (window.Vue) {
window['click'] = click
Vue.use(install); // eslint-disable-line
}
click.install = install
export default click
3 修改main.js
在文件中引入index.js，并vue.use(click)即可
