Vue中防止短时间内连续点击后多次触发请求（js节流思想）

本人处于前端小白阶段，在做项目的产品模块的时候有时会因为网络等原因连续点击提交按钮，导致添加多个重复的产品，刚开始是用disabled限制点击，体验不是太好，偶然在b站上发现一个Js节流视频，但是看得有点云里雾里，所以根据节流的思想自己写了个比较适合我的方法。

1.时间戳写法

测试

export default {
   data(){
        return {
            lastTime:0 //默认上一次点击时间为0    
        }
   },
   methods:{
     throttle(func, intervalTime){
        //获取当前时间的时间戳
        let now = new Date().valueOf();
        if(this.lastTime == 0 || (now-this.lastTime) > intervalTime){
        //重置上一次点击时间，intervalTime是我自己设置的间隔时间，根据自己的需要传参
           this.lastTime = now;
           console.log('间隔大于intervalTime秒，触发方法');
           //添加自己要调用的方法
            func();
        }else{
           console.log('不触发');
        }
     },
  }
}

 2.setTimeout写法

测试


//封装到公共的工具类中
function throttle(func, time) {//func-需要执行的函数， time-触发的事件间隔
   let timer = 0
   return ()=>{
      if(!timer){
          timer = setTimeout(()=>{
               func();
               timer = 0;
           },time)
       }
    }
 }

ps:在实际使用时建议封装成全局方法或工具类方便调用(Vue还可以封装成v-xxx的形式直接在标签

上用)， 这种方法虽然很好，但是遇到请求超时的情况可能不是太好处理（网络原因、数据太大）间隔时间可以跟axios的timeout时间一致。考虑通过后端是否返回res来控制（添加一个loading方法）。方法还有待提高！仅供参考，嘻嘻嘻！！