防止重复点击调取接口

场景

在项目中遇到过这样一个场景，点击提交表单的按钮之后，发现没有任何反应，随后又点击了一次，造成数据的重复提交，在数据库中出现了两条一模一样的数据。

原因

由于axios提交数据是异步提交，点击提交按钮是向后端异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多表数据处理就麻烦了，而且此类现象造成的数据都不正常，所以此种情况务必要避免。

解决办法

防抖

原理：当第一次触发点击事件时，不会立即执行接口，会等待监听一段时间，若在这段时间内没有再次触发该事件，等待时间过后就会执行接口。倘若等待时间期间监听到又点击了一次，等待时间随机重置，从最后一次点击时间开始再重新等待这段时间，等待结束后再执行接口。

步骤：
1.创建防抖全局js方法

//debounce.js
export const debounce=(()=>{
	let timer=null
	return (callback,wait)=>{
	clearTimeout(timer)
	timer=setTimeout(callback,wait)
	}
})

2.具体引用

//test.vue
<script>
import {debounce} from "./debounce"
export default{
name:'test'
data(){
return{}
},
methods:{
getMovieName(e){
	debounce(()=>{
		console.log("防抖成功")
	},1000)
}
}
}
</script>

案例

节流

原理：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

按钮禁用控制或者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()
          })
}