节流防抖最简单的实现

目录

引言

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

解释 

效果

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

解释

效果

此外

---

引言

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

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

template：

<button @click="onBtnClick">节流测试</button>

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('执行的逻辑...');
    },
  },
};

解释 

        flag为false的时候才能执行log打印；而除第一次外，只有点击后的1.5后才能变false，不到1.5s时flag被设置为true，则会直接return。

效果

        1.5s内无论点击按钮多少次只会执行一次，从第一次点击时开始计时1.5s。如图

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

script：

export default {
  name: "App",
  data() {
    return {
      time: null // 时间标志
    };
  },

  methods: {
    onBtnClick() {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        console.log('需要执行的相关逻辑');
        this.time = null;
      }, 1500);
       
    },
  },
};

解释

        首次点击（触发）时time为null跳过if语句并开始计时，1.5s内若再点击（触发）则会走if语句清空时间，加上后续的定时器保证了每次以最后点击1.5s后才执行log打印

效果

        1.5s内多次点击按钮以最后一次点击时开始计时1.5s后执行相关逻辑。演示 

此外

        a. setTimeout 是有返回值的（不是时间戳！）, 表示当前setTimeout在页面中的所有setTimeout中的序号；这个值可以传递给 clearTimeout 来取消该定时器。

       b. 上述代码中即使去掉 " this.time = null  " 这句，会发现不会影响上述效果，只是因为该demo太简洁。这句代码会影响if语句的执行，倘若if语句中还有其他逻辑可能会导致多次点时出现频繁执行。