如何理解节流防抖原理

一、为啥要使用节流和防抖

在项目开发中，我们经常用到的滚动事件或者用户输入事件，都是一些高频事件，如果对这类事件触发的频率没有节制，就会加重浏览器和服务器的负担。节流和防抖目的就是减少事件触发的次数。

1、防抖函数原理（debounce）

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

let timer=null
  function debounce(callback,delay){
     clearTimeout(timer)
     timer=setTimeout(()=>{
         callback();
    },delay)
}

2、节流函数原理（throttle）

事件在n秒内反复被触发，只会执行一次事件

let timer=null;
function throttle(callback,delay){
 if(!timer){
   timer=setTimeout(()=>{
       callback();
       clearTimeout(timer);
       timer=null;
    },delay)
}
}