click vue 重复调用_Vue 防止短时间内连续点击后多次触发请求的操作

如果连续点击提交按钮，可能会重复提交数据，导致出错，解决的方法可以使用disabled限制点击，感觉体验不是太好，所有给大家分享下面的方法

测试

export default {

data(){

return {

lastTime:0 //默认上一次点击时间为0

}

}

}

methods:{

throttle(){

//获取当前时间的时间戳

let now = new Date().valueOf();

//第一次点击

if(this.lastTime == 0){

console.log('触发事件');

this.lastTime = now;

}else{

if((now-this.lastTime) > 2000){

//重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改

this.lastTime = now;

console.log('间隔大于2秒，触发方法');

//添加自己要调用的方法

}else{

console.log('不触发');

}

}

},

}

这种方法虽然很好，但是遇到请求超时的情况可能不是太好处理(网络原因、数据太大)。考虑通过后端是否返回res来控制。方法还有待提高