js节流/防重复点击

​​​​​​​防抖：https://blog.csdn.net/qq_31754523/article/details/116162407

新建JS文件

export default {
	obj: {},
	canDoFunction(e = {}) {
		if (!this.obj[e.key]) {
			this.lockKey(e.key);
			e.success && e.success();
			if (e.time) {
				setTimeout(() => {
					this.releaseKey(e.key)
				}, e.time)
			}
		} else {
			e.fail && e.fail()
		}
	},
	releaseKey(key) {
		delete this.obj[key]
	},
	lockKey(key) {
		this.obj[key] = true
	}
}

 vue中main.js引入

import debouncer from '...' 

// 防重复点击
Vue.prototype.$canDoFunction= function(obj) {
	let orCanDoFunction = false
	debouncer.canDoFunction({ //一定时间内禁止重复调用模式（例：2秒内禁止重复执行）
		key: obj.funcName || 'funcName', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名
		time: obj.time || 1000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
		success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
			orCanDoFunction = true
		}
	})
	return orCanDoFunction
}

使用

if (!this.$canDoFunction({
	    time: 2000,
	    funcName: 'submit'
	})) {
	return
}

也可以防重复请求，请求成功/失败后执行，直接releaseKey("事件名")

参考作者提供的用法：https://github.com/mr-xiao-han/jiuaiDebounce