클래스: Debouncer<TFn>

정의 위치: debouncer.ts:142

디바운스된 함수를 생성하는 클래스입니다.

디바운스는 함수가 마지막으로 호출된 후 일정 시간이 지나야 실행되도록 합니다. 이는 창 크기 조정, 스크롤 이벤트 또는 입력 변경처럼 자주 발생하는 이벤트를 처리하면서 실행 빈도를 제한하려 할 때 유용합니다. 이 동기 버전은 더 가벼우며 대개 필요한 기능을 모두 제공합니다. Promise, 재시도 지원, 중단/취소 기능 또는 고급 오류 처리가 필요하면 AsyncDebouncer로 전환하십시오.

디바운스된 함수는 지연 기간의 시작(선행 에지) 또는 끝(후행 에지, 기본값)에 실행되도록 구성할 수 있습니다. 대기 기간에 새로 호출될 때마다 타이머가 재설정됩니다.

상태 관리:

• 반응형 상태 관리에 TanStack Store를 사용합니다
• 디바운서를 생성할 때 초기 상태 값을 제공하려면 initialState를 사용합니다
• 함수 실행에 반응하고 사용자 지정 로직을 구현하려면 onExecute 콜백을 사용합니다
• 상태에는 canLeadingExecute, 실행 횟수 및 isPending 상태가 포함됩니다
• 클래스를 직접 사용할 때는 debouncer.store.state를 통해 상태에 액세스할 수 있습니다
• 프레임워크 어댑터(React/Solid)를 사용할 때는 debouncer.state에서 상태에 액세스합니다

예시

const debouncer = new Debouncer((value: string) => {
  saveToDatabase(value);
}, { wait: 500 });

// Will only save after 500ms of no new input
inputElement.addEventListener('input', () => {
  debouncer.maybeExecute(inputElement.value);
});

타입 매개변수

TFn

TFn extends AnyFunction

생성자

생성자

new Debouncer<TFn>(fn, initialOptions): Debouncer<TFn>;

정의 위치: debouncer.ts:150

매개변수

fn

TFn

initialOptions

DebouncerOptions<TFn>

반환값

Debouncer<TFn>

속성

fn

fn: TFn;

정의 위치: debouncer.ts:151

---

key

key: string | undefined;

정의 위치: debouncer.ts:146

---

options

options: DebouncerOptions<TFn>;

정의 위치: debouncer.ts:147

---

store

readonly store: Store<Readonly<DebouncerState<TFn>>>;

정의 위치: debouncer.ts:143

메서드

cancel()

cancel(): void;

정의 위치: debouncer.ts:285

대기 중인 실행을 모두 취소합니다

반환값

void

---

flush()

flush(): void;

정의 위치: debouncer.ts:268

현재 대기 중인 실행을 즉시 처리합니다

반환값

void

---

maybeExecute()

maybeExecute(...args): void;

정의 위치: debouncer.ts:221

디바운스된 함수를 실행하려고 시도합니다 호출이 이미 진행 중이면 해당 호출이 큐에 추가됩니다

매개변수

args

...Parameters<TFn>

반환값

void

---

reset()

reset(): void;

정의 위치: debouncer.ts:296

디바운서 상태를 기본값으로 재설정합니다

반환값

void

---

setOptions()

setOptions(newOptions): void;

정의 위치: debouncer.ts:175

디바운서 옵션을 업데이트합니다

매개변수

newOptions

Partial<DebouncerOptions<TFn>>

반환값

void