JavaScript函数防抖与节流

一、函数防抖 debounce

1、概念

其概念衍生自机械开关和继电器的去弹跳；可以这么理解，一个弹簧片，你一直向下按，它变形了，直至你松手，它会反弹，也就是直到你松开，反弹的事件才会执行；类似的，比如你一直滚动窗口，你预设的回调函数不执行，直至你停止滚动了才执行该回调函数； 想要实现这种效果，我们就需要用到函数防抖了。

2、适合对应的事件

scroll、resize

3、简单示例

      let clock = null;
      document.querySelector('.main-content').addEventListener('scroll', () => {
        console.log('scroll会执行多次');
        if (clock) {
          clearTimeout(clock);
          clock = null;
        }
        clock = setTimeout(() => {
          console.log('我只执行一次')
        }, 50)

      })

4、封装后的函数

function debounce(fn,wait){
    var timer;
    return function(){
        var args = Array.prototype.slice.apply(arguments);
        if(timer){
            clearTimeout(timer);
        };
        timer = setTimeout(function(){
            fn.apply(this,args);
        },wait);
    }
}

5、效果

事件被连续触发多次后，其不会执行，直至你终止触发的事件后才开始执行；

防抖

二、函数节流Throttle

1、概念

连续触发事件，但是在n秒中只执行一次函数；

2、适合对应的事件

input、keyup

3、简单示例

   function  throttle (func,waitTime){
        let preTime=0;        
        return function () {
          let  nowTime=new Date();
          let context=this;
          let args = arguments;
          if(nowTime - preTime> waitTime ){
            func.apply(context,args);
            preTime=nowTime
          }               
        }       
      }

4、封装后的函数

方式一、
function throttle(fn,wait){
    var isExecute = false;
    return function(){
        var args = Array.prototype.slice.apply(arguments);
        if(isExecute) {
            return;
        }
        isExecute = true;
        setTimeout(function(){
            fn.apply(this,args);
            isExecute = fale
        },wait)
    }
}
方式二、
function throttle(fn,wait){
    var lastTime = new Date().getTime();
    return function(){
        var args = Array.prototype.slice.apply(arguments);
        var curTime = new Date().getTime();
        if((curTime - lastTime) < wait){return;};
        lastTime = curTime;
        fn.apply(this,args);
    }
}

5、效果

事件被连续触发多次后，只在每隔你指定的时间内执行一次；

节流

三、节流与防抖可视化对比图

可视化对比图

参考资料

1、Javascript函数防抖与节流
2、函数防抖和节流
3、函数防抖与函数节流