什么是防抖和节流？有什么区别？如何实现？

Posted 2021-09-13 茴香

防抖

动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件

实现：

function debounce(func,time){
  let timer = null;
  return ()=>{
    clearTimeout(timer);
    timer = setTimeout(()=>{
      func.apply(this,arguments)
    },time)
  }
}

---

节流

动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发

实现：

function throtte(func,time){
  let activeTime = 0;
  return ()=>{
    const current = Date.now()
    if(current-activeTime>time){
      func.apply(this,arguments);
      activeTime = Date.now();
    }
  }
}

简而言之，防抖是指高频触发的事件，在制定的单位时间内，只响应最后一次，如果在指定时间内再次触发，则重新计算时间。节流是指高频触发的事件，在指定的单位时间内，只响应第一次