debounce() function

debounce 함수는 디바운스된 함수가 마지막으로 호출된 이후 지정된 시간이 경과할 때까지 제공된 함수의 실행을 지연시키는 데 사용됩니다. 이 함수는 특히 사용자 입력 이벤트, 스크롤 또는 크기 조정과 같은 시나리오에서 함수가 실행되는 빈도를 제한하여 성능을 최적화하는 데 유용합니다. 또한 debounce 함수를 사용하면 첫 번째 호출 시 즉시 함수를 실행할 수 있으며(leading이 true로 설정된 경우), .cancel() 메서드를 사용하여 수동으로 취소할 수 있습니다.

Signature:

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

Example

const debounced1 = debounce((val: number) => {
  console.log("val", val);
}, 100);

debounced1();
debounced1();
debounced1(); // invoke func after 100ms

const debounced2 = debounce(
  (val: number) => {
    console.log("val", val);
  },
  100,
  { leading: true },
);
debounced2(); // immediately invoked func
debounced2();
debounced2(); // invoked func after 100ms

const debounced3 = debounce((val: number) => {
  console.log("val", val);
}, 100);
debounced3();
debounced3();
debounced3.cancel(); // cancel func

Open Source Code