Debounce

• 여러번 호출되는 함수 중에 마지막(혹은 제일 처음)함수만 호출되도록 하는 것.
• ex. 검색

window.addEventListener('input', debounce(function(e) {
    console.log(e.target.value);
}, 200));



const debounce =(fun, delay)=>{
  let timer;
  return function(){
    const args = agrguments;
    clearTimeout(timer);
    
    timer = setTimeout(()=> {
      func.apply(this,args);
    },delay)
  }
}

Throttling

• 일정 시간 동안 이벤트 핸들러를 한번만 실행하도록 하는 것.
• ex. 스크롤 이벤트

const throttle=(func,delay)=>{
  let timer;
  return ()=> {
      const args = arguments;
      if(timer){
        return;
      }
    
      timer = setTimeout(()=> {
        func.apply(this.args);
        timer = undefined;
      },delay);
  }
}