[JavaScript] Throttle vs Debounce

✨ Throttle와 Debounce는 왜 등장했는가!?

✔️ DOM 이벤트를 제어하는 방법이다. 자주 등장하는 이벤트의 실행 빈도를 줄여 성능상의 이점을 얻기 위해 사용한다!
✔️ 이벤트 핸들러가 한번에 많은(연속적인) 연산을 수행하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 한다!

ex) 스크롤링을 통한 이벤트 노출, 검색어 입력 시 자동완성 ...

✨ 개념

Throttle

• 일정 시간동안 이벤트를 한번만 발생

Debounce

• 여러번 발생하는 이벤트에서 가장 마지막 이벤트만 발생

✨ 사용 예시

const debounce = (callback, delay) =>{
  let timeId;
  return event => {
    if(timeId) clearTimeout(timerId)
    timerId = setTimeout(callback, delay, event);
  };
};

const throttle = (callback, delay) =>{
  let timeId;
  return event => {
    if(timeId) return;
    timerId = setTimeout(()=>{
      callback(event);
      timeId = null;
    }, delay, event);
  };
};

button.addEventListener('click', debounce(() =>{...},500)
button.addEventListener('click', throttle(() =>{...},500)

=> 클릭이 20번일 때, Debounce는 1번, Throttle은 6번 호출된다.

✨ 차이점

Throttle -> 일정한 주기마다 실행을 보장
Debounce -> 일정한 주기에 도달하기 전 이벤트가 계속 발생할 경우, 맨 마지막 이벤트를 제외한 이전 이벤트들은 다 무시된다.