js防抖节流

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

防抖和节流都是针对事件被高频率触发的场景所做的一种优化，目的是防止在某一个时间段频繁地去调用函数而引起性能变差。防抖和节流的主要思想就是对高频率触发的函数通过一定的方法来延迟其执行，下面我们来看下防抖和节流的具体实现。

防抖

防抖简单来说就是，对于一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。防抖的简单实现如下：

const debounce = (method, delay)  => {
      var timer = null;
      return () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          method();
        }, delay)
      }
    }

如上述代码所示，实现防抖的原理大致是：在第一次调用函数的时候，创建一个定时器，在指定的时间间隔之后运行代码；如果代码还没运行时，又触发了该函数，则清除旧的定时器，重新创建新的定时器；如果超过延时执行的时间，代码执行了，则此时已经是第二次触发。

防抖应用场景

在input框输入的时候，如果我们需要边输入边调取接口来获取数据从而进行结果的展示，如果一直进行接口的调用，频繁地触发dom操作，那么很容易就会引起页面的卡顿。这种情况就需要使用防抖来进行优化。

节流

节流简单来说就是，对于一个需要频繁触发的函数，在规定时间内，函数执行一次后，只有当大于设定的执行周期后才会继续执行第二次。节流的简单实现如下：

const throttle = (method, delay) => {
    var lastTime = 0; // 上一次函数触发的时间
    return () => {
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            method();
            lastTime = nowTime;
        }
    }
}

如上述代码所示，实现节流的原理大致是：在第一次执行函数的时候，会记录下函数的执行时间，当下一次执行的时候，比较时间是否还在所设置的间隔时间内，如果是则不执行函数，否则就继续执行函数。

节流使用场景

节流一般是用在比input输入更加频繁的场景中，比如页面的滚动事件scroll，这种情况需要控制事件流量，将其设定的时间内只执行一次，例如每隔0.5s计算一次位置信息。