节流防抖最简单的实现

手写节流防抖函数的可以看我上一篇文章--手写节流与防抖，本文用一个变量在vue中实现节流防抖的功能：

1. 节流：相当于技能cd，等cd过后再点技能才能生效

template：

"onBtnClick">节流测试

script：

export default {
  name: "App",
  data() {
    return {
      flag:false // 控制点击的标志
    };
  },
 
  methods: {
    onBtnClick() {
      if(this.flag) return
      this.flag = true
      setTimeout(() => {
        this.flag=false
      }, 1500);
      console.log('1.5s后执行后可再次点击');
      console.log('点击后执行的逻辑...');
       
    },
  },
};

 效果图： 

2. 防抖 ：相当回城，连续点击的最后一次才生效

methods：

    onBtnClick() {
      if(this.flag) return
 
      let time = null
      this.flag = true
      clearTimeout(time)
      time = setTimeout(() => {
        this.flag=false
      }, 1500);
      console.log('1.5s内的点击最后一次生效');
      console.log('点击后执行的逻辑...');
       
    },