본문으로 건너뛰기

함수: debounce()

function debounce<TFn>(fn, initialOptions): (...args) => void;

정의 위치: debouncer.ts:328

지정된 대기 시간이 지난 뒤 제공된 함수를 호출하도록 지연하는 디바운스 함수를 생성합니다. 대기 시간 동안 여러 번 호출하면 이전 대기 호출을 취소하고 타이머를 초기화합니다.

이 동기 버전은 더 가벼워 대부분의 경우 충분합니다. 프로미스, 재시도 지원, 중단/취소 기능 또는 고급 오류 처리가 필요하면 asyncDebounce로 전환합니다.

leading 옵션이 true이면 첫 호출에서 함수를 즉시 실행한 다음 다른 실행을 허용하기 전에 지연 시간 동안 기다립니다.

상태 관리:

  • 반응형 상태 관리에 TanStack Store를 사용합니다.
  • 디바운서 생성 시 initialState로 초기 상태 값을 제공합니다.
  • onExecute 콜백으로 함수 실행에 반응하고 사용자 지정 로직을 구현합니다.
  • 상태에는 canLeadingExecute, 실행 횟수, isPending 상태가 포함됩니다.
  • 내부 Debouncer 인스턴스의 store.state 속성으로 상태에 접근할 수 있습니다.
  • 프레임워크 어댑터(React/Solid)를 사용할 때는 훅의 state 속성에서 상태에 접근합니다.

타입 매개변수​

TFn​

TFn extends AnyFunction

매개변수​

fn​

TFn

initialOptions​

DebouncerOptions&lt;TFn>

반환값​

(...args): void;

매개변수​

args​

...Parameters&lt;TFn>

반환값​

void

예시​

const debounced = debounce(() => {
  saveChanges();
}, { wait: 1000 });

// Called repeatedly but executes at most once per second
inputElement.addEventListener('input', debounced);