40.防抖与节流

我们在日常开发中,为了节约性能会使用防抖与节流,本章就来讲解一下这2个的区别.简单来说防抖-控制时间,节流-控制频率

防抖(debounce)

顾名思义,就是为了防止手抖,在我们重复操作的时候可以重置等待时间,以防我们高频触发.举一个场景,我们搜索框联想搜索的时候,每当我们输入一个字符时就发一个请求,当我们输入内容过多时就会发出多个请求.所以就可以用到节流,可以没200毫秒检查一个,是否还有输入,没有就发出请求,有输入就重置时间.

    function debounce (func, delay) {
      let timer = null; // 计时器
      return function (...args) {
        clearTimeout(timer); // 清除上一次计时器
        timer = setTimeout(() => { // 重新定时
          func.apply(this, args);
        }, delay);
      };
    }

这是一个简版的防抖,我们还可以根据这个扩展.比如第一次是否触发...

节流(throtte)

设置状态锁，短时间高频率触发只有第一次触发成功,比如设置一个key作为状态锁，锁一开始是关闭的，即key值设置为false。当你点击时，会对key进行判断，如果key为false，未上锁，那么开始发起请求，并且给key上锁，即设置key为true。如果你继续点击，则对key进行判断，发现key上锁了，则不发起请求，点击无效。当请求完成后，key设置为false，则可以发送新一轮请求了.举一个场景,我们监听屏幕滚动事件,或者鼠标移动事件,这个就会多次触发.我们就这是使用节流在单位时间内触发一次就行.

    function throtte (func, time) {
      let timer = null; // 计时器
      return function (...args) {
        if (timer) return; // 无视，直接返回
        timer = setTimeout(() => {
          func.apply(this, args);
        }, time);
      };
    }