자바스크립트 debounce와 throttle 차이 및 성능 최적화 예제

사용자 입력, 스크롤, 리사이즈 등 브라우저 이벤트는 짧은 시간에 여러 번 연속으로 발생하는 경우가 많습니다. 이런 경우, 무분별하게 이벤트 핸들러가 호출되면 성능 저하가 발생할 수 있습니다. 이를 방지하기 위해 자바스크립트에서는 debounce(디바운스)와 throttle(스로틀) 기법을 활용합니다.

이 글에서는 두 개념의 차이점과 활용 예제를 정리합니다.

---

✨ debounce란?

연속된 이벤트 중 마지막 이벤트가 발생한 후 일정 시간 동안 아무 동작이 없을 때 한 번만 실행하는 방식입니다.

📌 사용 시점

• 검색창 자동완성
• 입력창 유효성 검사
• 창 크기 조절 이벤트 처리

예제:

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

const onResize = debounce(() => {
  console.log("창 크기 조절 완료!");
}, 500);

window.addEventListener("resize", onResize);

---

✨ throttle란?

연속된 이벤트가 발생하더라도 일정 시간 간격으로 함수 실행을 제한하는 방식입니다.

📌 사용 시점

• 스크롤 위치 감지
• 무한 스크롤 구현
• 마우스 이동, 드래그 이벤트

예제:

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

const onScroll = throttle(() => {
  console.log("스크롤 중");
}, 300);

window.addEventListener("scroll", onScroll);

---

🔍 비교 요약

 

구분	debounce	throttle
실행 시점	마지막 이벤트 후 일정 시간 경과 시	일정 시간 간격으로 주기적 실행
활용 예시	검색창 입력, 유효성 검사	스크롤, 드래그 이벤트
특징	과도한 호출 방지 (딜레이 후 실행)	주기적 호출 제한

---

✅ 결론

debounce와 throttle은 자바스크립트 성능 최적화에서 매우 중요한 도구입니다. 상황에 따라 적절히 선택하여 활용하면 브라우저 리소스를 아끼고 UX를 향상시킬 수 있습니다.

• 사용자 입력 이벤트 → debounce
• 지속적인 움직임 이벤트 (스크롤, 드래그 등) → throttle