场景
在项目中遇到过这样一个场景,点击提交表单的按钮之后,发现没有任何反应,随后又点击了一次,造成数据的重复提交,在数据库中出现了两条一模一样的数据。
原因
由于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()
})
}