디바운싱(Debouncing)과 쓰로틀링(Throttling)

📝 디바운싱(Debouncing)

일정 시간 내에 여러 번 발생하는 이벤트에 대해 마지막 이벤트가 발생한 후 일정 시간이 지난 뒤에 한 번만 함수를 실행하도록 하는 기술이다. 즉, 여러 번 호출되는 이벤트가 있을 때 최종적인 이벤트 하나만 실행되도록 한다.

🔎 작동 방식

1. 이벤트가 발생할 때마다 타이머를 설정한다.
2. 이벤트가 발생하면 타이머를 시작한다.
3. 지정된 시간 내에 새로운 이벤트가 발생하면 타이머를 리셋한다.
4. 타이머가 끝날 때까지 이벤트가 발생하지 않으면 마지막 이벤트만 처리된다.

🔎 사용예시

• 검색창에 입력할 때, 사용자가 타이핑을 멈춘 후에만 검색 요청을 보내는 경우
• 창 크기 조정(resize) 이벤트에서 마지막 조정 후에만 작업 수행

🔎 예시코드

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

const handleSearch = debounce(() => console.log("검색 요청"), 500);
input.addEventListener("input", handleSearch);

📝 쓰로틀링(Throttling)

함수가 일정 시간 간격으로만 실행되도록 하는 기술이다. 즉, 이벤트가 여러 번 발생하더라도 주어진 시간 간격 내에서는 최대 한 번만 실행된다.

🔎 작동 방식

1. 시간 간격을 정의한다.
2. 이벤트 발생 시 지정된 시간 간격 동안 첫 번째 이벤트만 처리하고, 그 시간 내의 추가 이벤트는 무시한다.
3. 시간이 지나면 다음 이벤트가 처리된다.

🔎 사용예시

• 스크롤 이벤트에서 일정 간격마다 위치를 업데이트
• 마우스 이동(mousemove) 이벤트에서 일정 주기로만 좌표를 기록

🔎 예시코드

function throttle(func, interval) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= interval) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

const handleScroll = throttle(() => console.log("스크롤 처리"), 1000);
window.addEventListener("scroll", handleScroll);

👀 최종 정리

두가지 방식 모두 이벤트 핸들링을 최적화하기 위한 기법으로, 이벤트 호출 빈도를 제어한다.

디바운싱은 이벤트가 멈춘 후 마지막 호출을 처리해 불필요한 중간 호출을 줄이고, 쓰로틀링은 일정 간격으로 이벤트를 실행해 과도한 호출을 방지한다는 차이점이 있다.