JS中函数的节流和防抖

JS中函数的节流(throttle)和防抖(debounce)

节流

• 概念：函数节流，顾名思义，控制函数的执行次数，以达到节约浏览器or服务器性能。一句话概括：函数在n秒内只能执行一次，重复触发不重新计算时间。
• 使用场景：监听用户网页的滚动行为，用户在滑动了网页2s，会触发非常多次mousemove事件，可以使用节流方式，每隔x百毫秒触发一次。
• 实现方式：

function throttle (fn,wait = 300){
  let timer;
  return function () {
    timer ? return : '';
    setTimeout(()=>{
      fn();
      timer = null;
    }, wait);
  }
}

防抖

• 概念：函数在n秒内只执行一次，重复触发重新计算时间.
• 使用场景：登录、点赞、发短信等操作，网络原因反应慢，可使用防抖函数对用户发送请求的频率做限制。
• 实现：

function debounce (fn, wait = 300){
  let tiemr;
  return function (){
    timer ? clearTimeout(timer) : '';
    setTimeout(()=>{
      fn();
    }, wait)
  }
}

以上都是开发中常用的，面试中也常考的手写题。