解决思路
第一种方法：在规定时间内将按钮禁用的方法
1.主要思想就是禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击。
源代码
代码语言：javascript复制 //一个保存按钮
<el-button
type="primary"
@click="handleInspectionItemSave"
:disabled="is_click" //这句话是要写的
v-loading.fullscreen.lock="inspectionItem.createLoading"
>{{ $t("commons.save") }}
</el-button> return {
is_click: false,
} handleInspectionItemSave() {
//按钮防止暴力点击
this.$refs.inspectionItemForm.validate((v) => {
this.is_click=true;
setTimeout(()=>{
this.is_click=false;
},2000)
}
}上面这种效果是点击第一次后禁止点击。 下面这种效果是点击第一次后还能再点击，但是只会保存一次。
造成重复提交原因
由于AJAX提交数据为异步提交，所以当我们点击提交按钮是通过xmlhttprequest向服务器发送异步请求，发送请求需要有处理时间，我们第一次点击的请求尚未完成，就有接二连三的又提交了几次，同时后来发送的请求同事也被发送到后台处理了，这种情况如果是数据读取则不会有太大影响，但是涉及到数据提交保存或者提交之后多表数据处理就更麻烦了，所以此种情况务必要避免，免得给大家造成麻烦。
举一反三
其实第一种的方法思想与防抖类似，补充一下防抖
防抖: 在一定时间内，动作只会执行一次。 举个例子：我在网上买了很多东西，今天很多快递都会到，时不时的就会有快递小哥的电话，我不想来回去取快递，就每隔1个小时取一次，如果1个小时内没有快递，就不下楼拿快递了。 效果：第一次点击立即执行，后面的点击每隔一段时间执行一次。
那除了上面的一种方法之外，还有其他的方法可以解决防止按钮重复点击吗？答案是有的，下面再来看看其他的思路。
另一个思路是获取并记录时间，当再次点击时，时间间隔大于1s时才有效
