Throttle과 Debounce

개념 설명

빈번하게 발생하는 이벤트의 실행 빈도를 제어하는 두 가지 최적화 기법으로, 성능 향상과 불필요한 연산 방지를 위한 핵심 패턴.

핵심 포인트

Throttle: 일정 시간 간격마다 최대 한 번만 실행 (규칙적 실행)
Debounce: 마지막 이벤트 발생 후 일정 시간이 지나야 실행 (지연 실행)
스크롤, 리사이즈, 검색 입력 등 고빈도 이벤트 최적화
사용자 경험과 서버 부하 감소에 효과적

예시 코드

// Throttle 구현
function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;
  
  return function (...args) {
    const currentTime = Date.now();
    
    if (currentTime - lastExecTime > delay) {
      func.apply(this, args);
      lastExecTime = currentTime;
    }
  };
}

더 많은 내용을 확인하세요! 📚

“Throttle과 Debounce”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.

✨ 모든 기술 문서 무제한 액세스

📝 실습 예제와 상세한 코드 설명

🎯 면접 예상 질문과 답변 가이드

플랜 비교하기