throttle() function

throttle 함수는 지정된 시간 내에 최대 한 번만 호출될 수 있는 함수의 throttle된 버전을 생성합니다. debounce와 달리 throttle은 연속적인 호출 중에도 함수가 일정한 간격으로 호출되도록 보장하며, 일시 중지를 기다리지 않습니다. 이는 스크롤 핸들러, 윈도우 크기 조정 또는 API 호출과 같은 비용이 많이 드는 작업의 빈도를 제한하는 데 유용합니다.

throttle된 함수는 leading 및 trailing 엣지 실행을 지원합니다:

• leading: 첫 번째 호출 시 즉시 실행
• trailing: throttle 기간이 끝날 때 최신 인자로 실행

throttle된 함수에는 대기 중인 trailing 호출을 취소할 수 있는 .cancel() 메서드가 포함되어 있습니다.

Signature:

declare function throttle<T extends (...args: any[]) => void>(
  func: T,
  wait: number,
  options?: {
    leading: boolean;
    trailing: boolean;
  },
): ((...args: Parameters<T>) => void) & {
  cancel: () => void;
};

Example

// 기본 사용 (기본 옵션 - leading과 trailing 모두 활성화)
const throttled = throttle((val: number) => {
  console.log("val", val);
}, 1000);

throttled(1); // 즉시 출력: val 1
throttled(2); // 무시됨
throttled(3); // 무시됨
// 1000ms 후 출력: val 3 (최신 인자로 trailing 호출)

// Leading 엣지만 사용 (빠른 반복 동작 방지에 유용)
const throttled = throttle(
  (val: number) => {
    console.log("val", val);
  },
  1000,
  { leading: true, trailing: false },
);

throttled(1); // 즉시 출력: val 1
throttled(2); // 무시됨
throttled(3); // 무시됨
// 1000ms 후 아무 일도 일어나지 않음

// Trailing 엣지만 사용 (배치 처리에 유용)
const throttled = throttle(
  (val: number) => {
    console.log("val", val);
  },
  1000,
  { leading: false, trailing: true },
);

throttled(1); // 지연됨
throttled(2); // 지연됨
throttled(3); // 지연됨
// 1000ms 후 출력: val 3 (최신 값만)

// 대기 중인 throttle 호출 취소
const throttled = throttle((val: number) => {
  console.log("val", val);
}, 1000);

throttled(1); // 즉시 출력: val 1
throttled(2);
throttled(3);
throttled.cancel(); // 대기 중인 trailing 호출 취소
// 1000ms 후 아무 일도 일어나지 않음

// 실제 사용 예 - 스크롤 이벤트 throttle
const handleScroll = throttle(() => {
  console.log("Scroll position:", window.scrollY);
}, 200);

window.addEventListener("scroll", handleScroll);

// 핸들러는 첫 스크롤 시 즉시 실행되고,
// 연속적인 스크롤 중에는 200ms마다 최대 한 번씩 실행되며,
// 스크롤이 멈춘 후 한 번 더 실행됩니다 (trailing 엣지)

Open Source Code