javascript函数防抖和函数节流~

javaScript

发布日期: 2019-08-26

阅读次数:

镇楼图杀生丸

写在前面

函数防抖和函数节流都是为了优化事件处理程序，
防抖一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。
节流一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

使用场景: 防抖经常用在我们搜索框输入搜索，点击提交，防止等；而节流一般在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;
      }
  }
}