[개발 지식] Throttling vs Debounce

Throttling vs Debounce

• Throttling과 Debounce는 웹 개발에서 주로 사용되는 두 가지 기술로
• 성능 최적화를 위해 이벤트 발생 빈도를 제어하는 데 사용됨.

---

Throttling 

정의:

• 스로틀링은 특정 시간 간격 내에 이벤트가 여러 번 발생해도,
  일정한 간격으로 이벤트를 처리하도록 제한하는 기술입니다.

동작 방식:

• 이벤트가 발생하면 설정된 시간 간격 동안 추가 이벤트를 무시합니다.
• 예를 들어, 사용자가 100ms 동안 10번의 이벤트를 발생시켰다면,
  스로틀링을 200ms로 설정하면 그중 첫 번째 이벤트와 두 번째 이벤트만 처리됩니다.

사용 사례:

• 스크롤 이벤트: 사용자가 페이지를 스크롤할 때, 스크롤 위치를 업데이트하거나 다른 작업을 수행하는 빈도를 제한하고 싶을 때.
• 윈도우 리사이즈 이벤트: 사용자가 브라우저 창 크기를 조정할 때, 레이아웃을 업데이트하는 빈도를 제한하고 싶을 때.

코드 예시:

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  }
}

// 사용 예시
window.addEventListener('resize', throttle(function() {
  console.log('윈도우 리사이즈');
}, 200));

---

Debounce

정의:

• 디바운스는 이벤트가 연속적으로 발생할 때, 특정 시간 동안 이벤트가 발생하지 않을 때까지 처리를 지연시키는 기술입니다.

동작 방식:

• 이벤트가 발생하면 설정된 시간 후에 이벤트를 처리합니다.
• 만약 그 시간 내에 동일한 이벤트가 다시 발생하면 타이머를 리셋하고 다시 기다립니다.
• 예를 들어, 사용자가 100ms 동안 10번의 이벤트를 발생시켰다면,
  디바운스를 200ms로 설정하면 마지막 이벤트 후 200ms가 지나야만 이벤트가 처리됩니다.

사용 사례:

• 검색 입력: 사용자가 검색창에 문자를 입력할 때, 입력이 끝난 후 일정 시간이 지나면 검색 요청을 보내도록 할 때.
• 폼 입력 유효성 검사: 사용자가 폼을 작성할 때, 입력이 끝난 후 일정 시간이 지나면 유효성 검사를 하도록 할 때.

코드 예시:

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

// 사용 예시
const handleInput = debounce(function() {
  console.log('입력 이벤트 처리');
}, 300);

document.getElementById('searchInput').addEventListener('input', handleInput);

---

차이점 요약

• Throttling(스로틀링):
  • 주기적으로 이벤트를 처리함.
  • 설정된 시간 간격 동안 하나의 이벤트만 처리.
  • 예: 스크롤, 리사이즈 등 자주 발생하는 이벤트.
• Debounce(디바운스):
  • 이벤트가 끝난 후 일정 시간 동안 추가 이벤트가 발생하지 않을 때 이벤트를 처리함.
  • 설정된 시간 동안 이벤트가 발생하지 않아야 처리.
  • 예: 검색창 입력, 폼 유효성 검사 등.

이 두 가지 기술을 적절히 사용하면, 불필요한 이벤트 처리를 줄여 성능을 최적화할 수 있습니다.