防抖和节流原理和实现

一、防抖

原理：对连续事件捕获，待事件间断后延迟一段时间(一般是1秒内)后才执行回调，延迟时间（n秒）以连续事件的最后一次触发时间作为这段时间的计时起点，延迟时间内的再触发会重新开始计时。

适用场景：输入框连续输入进行搜索、鼠标移动、鼠标拖拽等

const debounce = function(fn, delay = 500, ...arg){
    let timer;
    return function(e){
      if(timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, arg);
        timer = null;
      }, delay);
    }
  }

二、节流

原理：对一段时间内的连续事件的捕获，事件第一次触发就执行回调，以后间隔指定时间后再执行回调。

适用场景： 输入框连续搜索、鼠标滚动、屏幕缩放等

const throttle = function(fn, delay = 500, ...arg){
    let timer, trigger_time, now = Date.now();

    return function(){
      if(!trigger_time && now - trigger_time >= delay){ //第一次的立即执行
        fn.apply(this, arg);
        trigger_time = now;
      } else { //以后间隔delay时间触发事件
        timer = timer ?? setTimeout(()=>{
          fn.apply(this, arg);
          trigger_time = now;
          timer = null;
        },delay)   
      }
    }
  }