如何将Vue中防止连续点击触发请求的机制改写为长尾？

本文共计583个文字，预计阅读时间需要3分钟。

若连续点击提交按钮，可能会重复提交数据，导致出错。解决方法之一是使用`disabled`属性限制点击，但这样用户体验不佳。更好的方法是使用`el-button`结合`@click=throttle`进行测试。例如：`测试`。

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

<el-button @click="throttle()">测试</el-button> 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来控制。