一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Vue防止短时间内连续点击后多次触发请求操作代码示例

时间:2020-11-11 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下Vue防止短时间内连续点击后多次触发请求操作代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

代码如下:

测试 
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来控制。

热门栏目