Debounce와 Throttle 함수 차이와 활용법

⚡ Debounce란 무엇인가?

Debounce는 특정 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 끝난 후 일정 시간이 지나야 실행되는 기법을 말합니다.
쉽게 말해, 사용자가 입력을 멈추고 일정 시간이 지나야 함수가 실행되도록 지연시키는 방식이죠.
이 덕분에 불필요하게 자주 실행되는 함수 호출을 줄여 성능을 크게 개선할 수 있습니다.

대표적인 예시는 검색창 자동완성 기능입니다.
만약 사용자가 키보드를 칠 때마다 API 요청이 발생한다면 서버에 과부하가 생기고 네트워크 비용도 늘어납니다.
하지만 Debounce를 적용하면 입력이 끝난 뒤 일정 시간이 지나야 API 요청을 보내기 때문에 훨씬 효율적인 처리가 가능합니다.

• ⌨️검색창 입력 시 API 호출 최적화
• 📐브라우저 창 크기 조정 시 이벤트 최소화
• 🔍실시간 입력 검증 시 불필요한 연산 방지

아래는 간단한 Debounce 구현 예제 코드입니다.

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

// 사용 예시
const handleSearch = debounce((query) => {
  console.log("API 요청:", query);
}, 500);

위 코드에서 사용자가 입력할 때마다 기존 타이머를 초기화하고, 입력이 멈춘 후 0.5초가 지나야 함수가 실행됩니다.
즉, 불필요한 중복 호출 없이 마지막 입력만 처리할 수 있는 것이죠.

⏱️ Throttle이란 무엇인가?

Throttle은 일정 시간 간격마다 한 번씩만 함수가 실행되도록 제한하는 기법입니다.
즉, 이벤트가 아무리 자주 발생해도 정해진 간격으로만 실행되므로 CPU와 메모리 사용량을 크게 줄일 수 있습니다.
Debounce가 ‘마지막 이벤트에 집중’한다면, Throttle은 ‘주기적으로 실행’을 보장하는 방식이라고 볼 수 있습니다.

대표적인 활용 사례는 스크롤 이벤트입니다.
스크롤은 사용자가 페이지를 움직일 때 수십, 수백 번의 이벤트가 발생할 수 있습니다.
이때 Throttle을 적용하면 예를 들어 200ms마다 한 번만 함수가 실행되도록 제어하여 성능 저하를 방지할 수 있습니다.

• 🖱️무한 스크롤 데이터 로딩 최적화
• 📊스크롤 진행률 표시줄 업데이트
• 🖼️이미지 Lazy Loading 최적화

아래는 간단한 Throttle 구현 예제 코드입니다.

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

// 사용 예시
const handleScroll = throttle(() => {
  console.log("스크롤 이벤트 발생!");
}, 200);

위 코드에서는 스크롤 이벤트가 수십 번 발생해도 200ms마다 한 번만 실행됩니다.
즉, 과도한 연산을 방지하고 일정한 주기로 이벤트를 제어하는 데 매우 효과적입니다.

🔍 Debounce와 Throttle의 차이점

Debounce와 Throttle은 모두 불필요한 함수 실행을 줄여 성능을 최적화하는 기법이지만, 동작 원리와 적용 방식에는 큰 차이가 있습니다.
어떤 상황에서 어떤 기법을 적용해야 할지 헷갈리기 쉬운데, 이 부분을 명확히 이해하는 것이 중요합니다.

즉, Debounce는 사용자가 멈췄을 때 실행되고, Throttle은 사용 중에도 일정 주기로 실행된다고 정리할 수 있습니다.

💻 실전 예제 코드로 이해하기

이제 실제 코드 예제를 통해 Debounce와 Throttle의 차이를 직관적으로 살펴보겠습니다.
단순히 개념으로만 이해하는 것보다 실제 동작 방식을 코드로 확인하면 어떤 상황에서 어떤 방식을 써야 하는지 감이 확실히 잡힐 것입니다.

⌨️ Debounce 예제

아래 코드는 검색창 입력 시 Debounce를 적용하는 예제입니다.
사용자가 입력을 멈추고 500ms가 지난 뒤에만 API 요청이 실행되므로, 서버 요청 횟수를 크게 줄일 수 있습니다.

const input = document.querySelector("#search");

input.addEventListener("input", debounce((e) => {
  console.log("검색어:", e.target.value);
}, 500));

🖱️ Throttle 예제

이번에는 스크롤 이벤트에 Throttle을 적용하는 예제입니다.
사용자가 스크롤을 아무리 빠르게 움직여도 200ms마다 한 번씩만 이벤트가 실행되므로 성능이 크게 향상됩니다.

window.addEventListener("scroll", throttle(() => {
  console.log("현재 스크롤 위치:", window.scrollY);
}, 200));

🚀 언제 Debounce, 언제 Throttle을 써야 할까?

많은 개발자들이 Debounce와 Throttle을 헷갈려 하곤 합니다.
하지만 두 기법은 상황에 따라 선택 기준이 분명히 존재합니다.
사용자 경험과 시스템 성능을 모두 고려해 올바르게 적용하는 것이 핵심입니다.

⌨️ Debounce가 적합한 경우

Debounce는 사용자가 입력을 멈춘 후 최종 동작만 처리해야 하는 상황에 이상적입니다.
예를 들어 검색창 자동완성, 실시간 입력 검증, 창 크기 조정 이벤트 등이 대표적인 사례입니다.
즉각 반응보다 최종 결과가 중요한 경우 Debounce를 선택하면 좋습니다.

🖱️ Throttle이 적합한 경우

Throttle은 사용 중에도 일정한 반응성이 필요한 상황에 적합합니다.
예를 들어 스크롤 위치에 따라 헤더를 고정하거나, 스크롤 진행률을 표시할 때, 무한 스크롤 데이터를 로딩할 때 활용됩니다.
계속적인 사용자 액션에 반응해야 할 때는 Throttle을 쓰는 것이 훨씬 자연스럽습니다.

❓ 자주 묻는 질문 (FAQ)