학습 센터로 돌아가기

⏱️ JavaScript Debounce & Throttle

이벤트 호출 빈도 제어 기법을 시각적으로 학습해보세요

🎯 Debounce

연속된 이벤트 중 마지막 이벤트만 실행

작동 방식:

이벤트가 발생할 때마다 타이머를 재설정하고, 지정된 시간 동안 추가 이벤트가 없을 때만 함수를 실행

적합한 사용 사례:

  • 검색 입력 (실시간 검색)
  • 폼 검증
  • 자동 저장
  • API 호출 최적화

⚡ Throttle

일정 시간 간격으로 함수를 실행

작동 방식:

함수가 실행된 후 지정된 시간 동안은 추가 호출을 무시하고, 시간이 지나면 다시 실행 가능

적합한 사용 사례:

  • 스크롤 이벤트
  • 리사이즈 이벤트
  • 무한 스크롤
  • 게임 조작 (연속 클릭)

📚 어원과 기억법

단어원래 의미동작 방식기억법 요약
Debouncebounce(튀다) + de(제거)마지막 입력만 처리튀는 입력 제거 → "끝난 뒤에 한 번만"
Throttle속도 조절기 (가속 조절 장치)일정 간격으로 실행과도한 입력을 제한 → "주기적으로만"

💡 쉬운 기억법: Debounce는 "공이 튀는 것을 막아서 마지막에 한 번만", Throttle은 "자동차 가속을 조절해서 일정하게"

📊 Debounce vs Throttle 비교

구분DebounceThrottle
실행 패턴마지막 이벤트만 실행일정 간격으로 실행
타이머 처리매번 타이머 재설정일정 시간 후 재활성화
연속 입력 시입력이 끝날 때까지 실행 지연일정 간격으로 중간 실행
주요 목적불필요한 호출 완전 방지호출 빈도 제한

🧪 인터랙티브 시뮬레이터

200ms (빠름)1500ms (보통)3000ms (느림)

💡 더 큰 지연시간으로 설정하면 debounce와 throttle의 차이를 더 명확하게 확인할 수 있습니다!

빠르게 타이핑하며 debounce와 throttle의 차이를 확인해보세요!

일반 이벤트
0
Debounce
0
Throttle
0

🔍 실시간 이벤트 로그

시뮬레이션을 시작하고 입력해보세요!

💡 Debounce 구현 코드

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

// 사용 예제
const debouncedSearch = debounce((query) => {
  console.log('검색:', query);
}, 500);

// 연속 호출해도 마지막 호출만 실행됨
debouncedSearch('a');
debouncedSearch('ab');
debouncedSearch('abc'); // 이것만 실행

⚡ Throttle 구현 코드

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

// 사용 예제
const throttledScroll = throttle(() => {
  console.log('스크롤 처리');
}, 100);

// 100ms마다 한 번씩만 실행됨
window.addEventListener('scroll', throttledScroll);

🚀 실무 활용 팁

✅ 적절한 사용

  • • Debounce: 사용자 입력 완료 후 처리 (검색, 검증)
  • • Throttle: 지속적인 이벤트 제어 (스크롤, 리사이즈)
  • • 적절한 지연 시간 설정 (보통 100-500ms)
  • • 사용자 경험을 고려한 시간 조정

⚠️ 주의사항

  • • 너무 긴 지연 시간은 사용자 경험 저하
  • • 메모리 누수 방지를 위한 cleanup 필요
  • • React에서는 useCallback과 함께 사용
  • • 컴포넌트 언마운트 시 타이머 정리
🧑‍💻

1nnovator 김민성

JavaScript 학습 센터 개발자

기술 블로그•Interactive JavaScript Learning Platform

🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!

🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.