函数防抖、函数节流的区别及其应用场景

写在前面

• 函数防抖和函数节流都是为了优化事件处理程序，

• 防抖 一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

• 节流 一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

使用场景: 防抖 经常用在我们搜索框输入搜索，点击提交，防止等；而 节流 一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力

函数防抖；

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

• 实现如下:

 const debounce = (method, delay)  => {
      var timer = null;  //定时器
      return () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          method(); // method.apply(this) 看你用不用箭头函数
        }, delay)
      }
    }
复制代码

函数节流；

• 原理：第一次执行函数的时候，记录函数执行的时间，当下一次执行的时候，比较时间是否还在间隔时间内，如果是则不执行，否则继续执行；

• 实现如下:

const throttle = (method, delay) => {
    var lastTime = 0; // 上一次函数触发的时间
    return () => {
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            method(); // method.apply(this) 看你用不用箭头函数
            lastTime = nowTime;
        }
    }
}
复制代码

总结:

函数防抖和函数节流 两者非常相似，但还是有些区别，具体区别可以自行百度或者看以下文章；作者博客:Eno

文章参考:
函数防抖和节流的区别
lodashjs