디바운스(Debounce)와 스로틀(Throttle)

디바운스(Debounce)와 스로틀(Throttle)은 웹 개발에서 고성능 애플리케이션을 구현하기 위해 자주 사용되는 기술입니다. 이들은 주로 이벤트 핸들링 최적화를 목적으로 하며, 불필요한 함수 실행의 수를 줄임으로써 리소스 사용을 효율적으로 관리합니다.

디바운스 (Debounce)

디바운스는 연속된 이벤트 호출을 그룹화하여 특정 시간 동안 발생한 이벤트들 중 마지막 이벤트만을 실행하도록 하는 기술입니다. 이는 검색 자동완성, 리사이징, 키 입력 처리 등의 상황에서 유용하게 사용됩니다.

function debounce(func, wait) {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 사용 예시
const debouncedFunction = debounce(() => console.log('Hello'), 2000);

// 2초 내에 여러 번 호출되더라도, 마지막 호출 이후 2초가 지나야 "Hello"가 출력됩니다.

스로틀 (Throttle)

스로틀은 이벤트를 일정한 주기마다 한 번씩만 실행되도록 제한하는 기술입니다. 이는 스크롤 이벤트 처리, 마우스 이동 추적 등의 상황에서 이벤트 호출 빈도를 줄이는 데 유용합니다.

function throttle(func, limit) {
  let inThrottle;

  return function() {
    const args = arguments;
    const context = this;

    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 사용 예시
const throttledFunction = throttle(() => console.log('Hello'), 2000);

// 2초마다 최대 한 번씩만 "Hello"를 출력합니다. 2초 내에 여러 번 호출되도 첫 번째 호출만 실행됩니다.

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

• 디바운스는 연속된 호출을 그룹화하여 마지막 호출에 대해서만 함수를 실행합니다. 이는 "최종적으로" 무언가를 실행하고자 할 때 유용합니다.
• 스로틀은 일정 시간 동안 반복되는 호출 중 첫 번째 호출만을 실행하고, 그 다음 호출은 지정된 시간 간격이 지난 후에 실행됩니다. 이는 "균등하게" 함수를 실행하고자 할 때 유용합니다.

디바운스와 스로틀은 이벤트 핸들링의 성능을 향상시키고, 사용자 경험을 개선하는 데 도움을 줍니다. 상황에 맞게 적절히 선택하여 사용하는 것이 중요합니다.