🌀 5. debounce vs throttle — 스크롤 이벤트 최적화할 때 항상 헷갈려서 정리해봤다

---

React에서 검색 자동완성 기능을 구현하거나,
스크롤 이벤트를 감지해서 무한 스크롤을 만들다 보면 debounce와 throttle을 꼭 만나게 된다.
막상 구현하려고 하면 "둘 중 뭐가 뭐였더라?" 하게 돼서 정리해봤다.

---

✅ debounce란?

마지막 이벤트가 발생한 후 일정 시간이 지나야 실행

즉, 사용자가 입력을 멈추고 일정 시간이 지나야 함수가 실행된다.
주로 검색창 자동완성 같은 데에서 사용된다.

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

---

✅ throttle이란?

일정 시간 동안 한 번만 실행되게 제한

스크롤처럼 이벤트가 짧은 시간 간격으로 계속 발생하는 경우,
너무 많은 호출을 방지하기 위해 일정 시간 단위로 끊어서 실행한다.

function throttle(fn, limit) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

---

✅ 정리 비교

구분	debounce	throttle
실행 시점	마지막 이벤트 발생 후 일정 시간 뒤	일정 시간마다 한 번씩
사용 예시	검색창 입력, 창 크기 조절 등	스크롤 이벤트, 드래그, resize 등
특징	이벤트가 끝난 후 실행됨	주기적으로 실행됨

---

📝 내가 느낀 점

개념만 보면 비슷해 보이지만,
"사용자가 입력을 멈췄을 때" 실행해야 하는 상황엔 debounce,
"계속 발생하는 이벤트를 제한하고 싶을 때" throttle을 써야 한다는 차이가 분명해졌다.

이제 무한스크롤 만들 때 헷갈리지 않을 자신이 생겼다 😎

---

🎯 "입력은 debounce, 이벤트는 throttle!"