디바운스(Debounce), 쓰로틀(Throttle)

디바운스 (Debounce)

디바운스는 연속해서 발생하는 이벤트 중 마지막 이벤트가 발생한 후 일정 시간이 지나면 실행되도록 하는 방식이며, 이벤트가 계속 발생하는 동안에는 실행되지 않다가, 사용자가 입력을 멈추거나 일정 시간이 지나야 실행된다.

사용 예시

• 검색창 자동완성: 사용자가 입력할 때마다 서버에 요청을 보내는 것이 아니라, 입력이 끝난 후 일정 시간이 지나면 요청을 보낸다.
• 윈도우 리사이즈 이벤트: 창 크기를 조절할 때마다 발생하는 이벤트를 연속적으로 처리하는 대신, 최종 크기가 결정된 후 일정 시간이 지나야 실행된다.

예제 코드

function debounce(func: Function, delay: number) {
  let timer: NodeJS.Timeout;
  return function (...args: any[]) {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
}

// 사용 예시: 입력 이벤트에 적용
const handleSearch = debounce((query: string) => {
  console.log(`검색 실행: ${query}`);
}, 500);

document.getElementById("searchInput")?.addEventListener("input", (event) => {
  handleSearch((event.target as HTMLInputElement).value);
});

위 코드에서는 사용자가 입력할 때마다 handleSearch가 실행되지 않고, 입력이 멈춘 후 500ms가 지나면 실행된다.

---

쓰로틀 (Throttle)

쓰로틀은 이벤트가 연속해서 발생해도 일정 시간 간격마다 한 번만 실행되도록 하는 방식이며, 일정 시간이 지나기 전에는 이벤트가 다시 발생해도 무시된다.

사용 예시

• 무한 스크롤: 사용자가 스크롤할 때 데이터를 계속 불러오는 것이 아니라, 일정 간격마다 한 번만 요청을 보낸다.
• 버튼 연타 방지: 사용자가 버튼을 여러 번 클릭하더라도, 일정 시간 내에는 한 번만 실행된다.
• 윈도우 스크롤 이벤트: 스크롤이 계속 발생해도 일정 간격마다 실행되도록 제한된다.

예제 코드

function debounce(func: Function, delay: number) {
  let timer: NodeJS.Timeout;
  return function (...args: any[]) {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
}

// 사용 예시: 입력 이벤트에 적용
const handleSearch = debounce((query: string) => {
  console.log(`검색 실행: ${query}`);
}, 500);

document.getElementById("searchInput")?.addEventListener("input", (event) => {
  handleSearch((event.target as HTMLInputElement).value);
});

위 코드에서는 사용자가 스크롤할 때마다 handleScroll이 실행되는 것이 아니라, 1초마다 한 번씩 실행된다.

---

디바운스 vs 쓰로틀

기법	동작 방식	사용 예시
디바운스 (Debounce)	마지막 이벤트 후 일정 시간이 지나야 실행	검색 자동완성, 입력 폼 검증, 윈도우 리사이즈
쓰로틀 (Throttle)	일정 시간 간격마다 한 번만 실행	무한 스크롤, 버튼 연타 방지, 윈도우 스크롤

 

• 무한 스크롤은 사용자가 스크롤할 때마다 서버 요청을 보내면 성능이 저하될 수 있으므로, 일정 간격마다 한 번씩 데이터를 요청하도록 제한하는 쓰로틀이 적합하다.
• 검색 입력 필터링에는 사용자가 입력을 멈춘 후 일정 시간이 지나면 실행되도록 하여 불필요한 서버 요청을 줄일 수 있는 디바운스가 적합하다.