菜鸟笔记
提升您的技术认知

节流和防抖的原理以及实现

两者的区别:

防抖和节流的作用都是防止函数多次调用。

区别在于: 假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖的情况下只会调用一次,而节流的 情况会每隔一定时间(参数wait)调用函数。

防抖:

防抖动是将多次执行变为最后一次执行

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

节流:

节流是将多次执行变成每隔一段时间执行

function throttle(func, wait) {
  let perTime = Date.now();
  return function (...args) {
    let curTime = Date.now();
    if (curTime - perTime > wait) {
      func.apply(this, args);
      perTime = curTime;
    }
  };
}