建立网站的公司杭州/网站关键词优化教程

解决思路

第一种方法：在规定时间内将按钮禁用的方法

1.主要思想就是禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击。

源代码

 //一个保存按钮<el-buttontype="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时才有效