디바운싱(debouncing) / 쓰로틀링(throttling)

 

JavaScript에서 연속적으로 이벤트가 발생할 경우 핸들러 내부의 코드가 여러 번 실행된다. 예를 들어 핸들러가 서버에 HTTP 요청을 한다고 가정했을 때 연속적으로 이벤트가 발생하면 서버에 부담을 줄 것이다. Debouncing과 Throttling은 이런 상황을 방지하여 성능을 최적화하는 프로그래밍 기법이다. 대표적으로 스크롤, 버튼 클릭, 텍스트 입력 등과 같이 연속으로 발생하는 이벤트에 사용된다.

 

1. Debouncing

특정 이벤트가 연속해서 발생할 때, 마지막 이벤트가 발생하고 일정 시간이 지난 후에 함수를 실행하는 방법이다. <input>에 입력하는 동안 불필요한 HTTP 요청을 줄이기 위해 많이 사용한다. 예를 들어 검색창을 구현할 때, 텍스트 입력이 완료되고 일정 시간이 지난 후에 요청을 보낸다.

예시

function debounce(delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => console.log("실행"), delay);
  };
}

 

2. Throttling

일정 시간 간격마다 함수가 한 번만 실행된다. 즉, 연속 이벤트가 발생하더라도 일정 주기마다 한 번씩만 실행된다. 스크롤이나 리사이즈 이벤트처럼 자주 발생하는 이벤트에서 많이 사용된다.

예시

function throttle(delay) {
    let timer;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
            	timer = null;
            	console.log("실행");
            }, delay);
        }
    };
}

 

 

3. 비교

	Debouncing	Throttling
동작	마지막 이벤트 기준 일정 시간 후에 실행	일정 시간마다 한 번씩 실행
사용	input 필드의 HTTP 요청	스크롤, 리사이즈 등 자주 발생하는 이벤트