当用户快速点击提交按钮时，会发送多个请求，为了防止这个问题，我们需要对按钮进行限制
vue项目防止按钮重复点击（重复请求接口）
1.首页先写入main.js中
// 设置点击间隔
import Vue from 'vue'
Vue.directive('preventClick', {
inserted (el) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, 3000)
}
})
}
})
2.在button或el-button标签上绑定该指令
<button v-preventClick>普通按钮</button>
<el-button v-preventClick>Element按钮</el-button>
场景
1.保存提交按钮不小心点击了多次。
2.由于网络服务器卡等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。
3.resize、scroll，输入框内容校验等频繁操作。
原因
由于axios提交数据为异步提交，点击提交按钮是通过xmlhttprequest向后端发送异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多表数据处理就麻烦了，而且此类现象造成的数据都不正常，所以此种情况务必要避免。
解决方法
一.防抖
原理：当第一次触发点击事件时，不会立即执行接口，会等待监听一段时间，若在这段时间没有再次触发该事件，等待时间过后就执行接口。倘若等待时间期间监听到又点击了一次，等待时间随即重置，从最后一次点击事件开始再重新等待这段时间，等待结束后再执行接口。
步骤：
1.创建防抖全局js方法
/**
* 防抖函数
* 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
let timeout = null;
const debounce = function(func, wait, immediate) {
// 清除定时器
if (timeout !== null) clearTimeout(timeout);
// 立即执行，此类情况一般用不到
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function() {
timeout = null;
}, wait);
if (callNow) typeof func === 'function' && func();
} else {
// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
timeout = setTimeout(function() {
typeof func === 'function' && func();
}, wait);
}
}
2.具体引用
// 点赞、取消点赞
this.$util.debounce(this.likeCountDelete, 250, true)
缺点：接口操作不是立即调用，需要等待一定时间，倘若时间设置过长，交互感不好。若出现恶意频繁点击不停，接口就会一直反复等待下去一直不会调用。若是现象2的情况，第一次点击后接口返回数据时间过长，一旦超过这个等待时间，按钮再次被点击后还是会出现重复调用的情况。
二.节流
原理：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
步骤：
1.创建节流全局js方法
/**
* 节流原理：在一定时间内，只能触发一次
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
let timer, flag;
const throttle = function(func, wait, immediate) {
if (immediate) {
if (!flag) {
flag = true;
// 如果是立即执行，则在wait毫秒内开始时执行
typeof func === 'function' && func();
timer = setTimeout(() => {
flag = false;
}, wait);
}
} else {
if (!flag) {
flag = true
// 如果是非立即执行，则在wait毫秒内的结束处执行
timer = setTimeout(() => {
flag = false
typeof func === 'function' && func();
}, wait);
}
}
};
2.具体引用
// 点赞、取消点赞
this.$util.throttle(this.likeCountDelete, 250, true)
缺点：若是现象2的情况，第一次请求返回时间超过等待的时间，此时再次点击就会再次调用事件接口，造成数据的重复异常
三.按钮禁用控制或者loading
原理：当第一次点击按钮进入事件，按钮状态变为禁用状态，或者打开loading函数进行等待，当请求返回后台数据后按钮再恢复至可点击状态或者loading关闭
// 按钮
<el-button @click="save" :disabled="disabledFlag">保存</el-button>
save() {
// 调用接口之前禁用按钮，防止多次点击调用接口
this.disabledFlag = true
// 或者打开loading等待
this.loading.show()
// 调用接口进行添加填报数据
api.save({ id: this.id }).then(res => {
// 接口返回后
this.disabledFlag = false
this.loading.hide()
this.$message({
type: 'success',
message: "保存成功！"
})
}).catch(() => {
this.disabledFlag = false
this.loading.hide()
})
}
可以完全避免现象2的情况，此方法只有第一次点击调用接口返回数据后才会被点击
