Debounce and Throttle

디바운스와 스로틀

짧은 시간 간격으로 연속해서 발생하는 이벤트(ex. scroll, resize, input, mousemove 등) 에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.

디바운스와 스로틀은 연속해서 발생하는 이벤트를 그룹화해서 코드의 성능을 최적화하는 프로그래밍 기법으로 타이머 함수를 사용해 구현된다.

 

Debounce(디바운스)

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

const handleSearch = debounce(() => {
    // 검색 API 호출
}, 500);

• 연속된 이벤트를 그룹화해서 마지막 이벤트가 발생하고 일정 시간이 지난 후에 이벤트 핸들러가 한 번만 호출되도록 하는 기술
• resize 이벤트 처리, 검색창 자동완성(사용자 타이핑 멈춘 후 API 호출), 버튼 중복 클릭 방지 처리, 입력 폼 유효성 검사 등에 사용
• (예) 텍스트 입력 필드에서 input 이벤트가 짧은 시간 간격으로 연속해서 발생하는 경우
  • API 호출을 수행하는 함수를 디바운싱해 사용자가 몇 초 동안 입력을 중단한 후에만 함수가 실행되도록 할 수 있다.
  • 서버 과부하 또는 관련 없는 결과가 반환될 수 있는 많은 API 호출을 피할 수 있다.

 

Throttle(스로틀)

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

const handleScroll = throttle(() => {
    // 스크롤 이벤트 처리
}, 1000);

• 연속된 이벤트를 그룹화해서 일정 주기마다 한 번씩만 실행되도록 제한하는 기술
• scroll 이벤트 처리, 무한 스크롤 UI 구현 등에 사용
• (예) 페이지 레이아웃을 조정하는 크기 조정 이벤트 핸들러
  • 레이아웃을 업데이트하는 함수를 제한하여 100ms마다 한 번만 실행되도록 할 수 있다.
  • 코드를 너무 자주 실행하여 사용자 인터페이스가 불안정해지거나 CPU 사용량이 높아지는 것을 방지할 수 있다.

 

디바운스와 스로틀의 차이점

// Debounce: _ _ _ _ _ X (300ms 후에 실행)
// Throttle: X _ _ X _ _ X (300ms 간격으로 실행)

	Debounce(디바운스)	Throttle(스로틀)
실행 시점	마지막 이벤트 후 지정된 시간이 지나면 실행	일정 시간 간격으로 실행
사용 목적	연속된 이벤트의 마지막 한 번만 처리하고 싶을 때	일정 주기로 이벤트를 처리하고 싶을 때
성능 최적화 관점	불필요한 API 호출이나 계산을 줄이는 데 효과적	주기적인 업데이트가 필요한 경우에 리소스 사용을 제한