【前端工程师手册】30分钟看懂函数防抖和节流

防抖和节流

假若有一个饮水机，规定按下按钮以后2秒后开始出水，有个闲得x疼的人很快的按按钮10秒，饮水机会做何反应呢？

防抖（debounce）：在按下按钮和出水的这2秒内若是还有人按按钮，饮水机会从新开始计算2秒，也就是说老是以最新的操做为基准来计算时间


节流：即便被人不间断的按按钮了10秒钟，可是饮水机依然不紧不慢的2s出一次水，也就是说无论外部操做的多快，饮水机总会有本身的频率

代码实现

防抖

function debounce(func, delay) {
    var timer;
    return function() {
        clearTimeout(timeout);
        timer = setTimeout(function(){
          func();
        },delay)
    };
};

节流

function throttle(fn, threshhold) {
 var timer
 var start = Date.now();
 return function () {

    var curr = Date.now();
 
    clearTimeout(timer)
    if(curr - start >= threshhold){ 
        fn()
        start = curr
    }else{
        timer = setTimeout(function(){
            fn() 
        }, threshhold);
    }
  }
}

说一个神器：可视化的防抖和节流，以动画的形式看到二者的区别

使用场景

防抖：频繁操做可是只须要响应最后一次便可

• 输入框验证，只须要对最后一次输入事件做出验证便可
• resize事件
• ...

节流：调节频率，以必定的频率去响应

• 搜索联想
• 响应拖拽
• ...