【前端工程师手册】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事件
• ...

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

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