JavaScript debounce vs throttle 차이 완벽 정리 – 부드럽고 빠른 웹을 위한 필수 개념

 

 

안녕하세요 😊
웹 개발을 하다 보면,
스크롤 이벤트나 키보드 입력 등 빠르게 반복되는 동작이 있을 때
브라우저가 너무 많은 일을 처리하게 되어
성능이 저하되는 경우가 많습니다.

이럴 때 사용하는 두 가지 핵심 개념이 바로
debounce와 throttle입니다!

이번 글에서는 이 두 개념의 차이점과
실제 사용 예제까지 친절하게 정리해드릴게요 💡

---

📍 1. debounce란?

사용자가 이벤트를 멈췄을 때 딱 한 번 실행되도록 하는 방식입니다.
입력이 계속되는 동안은 실행되지 않고,
입력이 끝나고 일정 시간이 지나야 실행됩니다.

 

✔ 예시 상황:

• 검색창 자동완성
• 창 크기 변경 시 리사이징 이벤트
• 버튼 중복 클릭 방지

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

 

---

📍 2. throttle이란?

일정 시간마다 한 번씩만 실행되도록 하는 방식입니다.
사용자가 이벤트를 연속적으로 발생시켜도
설정한 시간 간격으로만 실행됩니다.

 

✔ 예시 상황:

• 무한 스크롤
• 스크롤 위치 따라 UI 변경
• 게임 캐릭터 이동 제한

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

 

---

📍 3. debounce vs throttle 비교표

항목	debounce	throttle
실행 시점	마지막 동작 후 일정 시간 뒤	일정 시간마다
이벤트 연속 호출	1번만 실행	일정 간격으로 계속 실행
예시	검색창, 자동완성	스크롤 이벤트, 드래그
목적	과도한 호출 방지	주기적 실행 제한

 

---

📍 4. 실제 사용 예 – 스크롤 위치 감지

window.addEventListener('scroll', throttle(() => {
  console.log('스크롤 중...');
}, 200));

window.addEventListener('resize', debounce(() => {
  console.log('창 크기 조정됨');
}, 300));

---

✅ 마무리하며

debounce와 throttle은
웹사이트의 반응 속도와 성능을 향상시킬 수 있는
아주 중요한 개념입니다.

특히 실시간 입력, 스크롤, 리사이징, 클릭 방지 등
다양한 상황에 적절히 사용하면
웹 앱의 사용자 경험을 눈에 띄게 개선할 수 있습니다 😊