본문으로 건너뛰기

클래스: AsyncDebouncer<TFn>

정의 위치: async-debouncer.ts:218

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

비동기 버전과 동기 버전: 비동기 버전은 동기 Debouncer보다 다음과 같은 고급 기능을 제공합니다.

  • 디바운스된 함수의 결과를 기다릴 수 있는 Promise를 반환합니다
  • AsyncRetryer 통합을 통한 재시도 지원이 내장되어 있습니다
  • 진행 중인 실행을 중단하는 기능을 지원합니다
  • 대기 중인 실행이 시작되지 않도록 취소하는 기능을 지원합니다
  • onError 콜백과 throwOnError 제어를 통한 포괄적인 오류 처리를 제공합니다
  • 실행을 상세히 추적합니다(성공/오류/처리 완료 횟수)

비동기 기능, 반환값 또는 실행 제어가 필요하지 않다면 동기 Debouncer가 더 가볍고 간단합니다.

디바운스란? 디바운스는 마지막 호출 후 지정된 지연 시간이 지나야 함수가 실행되도록 보장합니다. 새로 호출할 때마다 지연 타이머가 재설정됩니다. 창 크기 조절이나 입력 변경처럼 자주 발생하는 이벤트에서 이벤트 발생이 멈춘 후에만 핸들러를 실행하려는 경우에 유용합니다.

일정한 간격으로 실행을 허용하는 스로틀과 달리, 디바운스는 지정된 지연 시간 동안 함수가 호출되지 않을 때까지 어떤 실행도 발생하지 않도록 합니다.

오류 처리:

  • onError 핸들러를 제공하면 오류와 AsyncDebouncer 인스턴스를 인수로 호출합니다
  • throwOnError가 true이면(onError 핸들러가 없을 때의 기본값) 오류를 던집니다
  • throwOnError가 false이면(onError 핸들러가 있을 때의 기본값) 오류를 무시합니다
  • onError와 throwOnError를 함께 사용할 수 있으며, 오류를 던지기 전에 핸들러를 호출합니다
  • 내부 저장소를 사용하여 오류 상태를 확인할 수 있습니다

상태 관리:

  • AsyncDebouncer는 상태 관리에 반응형 저장소를 사용합니다
  • AsyncDebouncer를 생성할 때 initialState로 초기 상태 값을 제공합니다
  • 상태에는 canLeadingExecute, 오류 횟수, 실행 상태, 성공/처리 완료 횟수가 포함됩니다
  • store 속성과 그 속성의 state 게터를 통해 상태에 접근할 수 있습니다
  • 저장소는 반응형이며 상태가 변경되면 구독자에게 알립니다

예시​

const asyncDebouncer = new AsyncDebouncer(async (value: string) => {
  const results = await searchAPI(value);
  return results; // Return value is preserved
}, {
  wait: 500,
  onError: (error) => {
    console.error('Search failed:', error);
  }
});

// Called on each keystroke but only executes after 500ms of no typing
// Returns the API response directly
const results = await asyncDebouncer.maybeExecute(inputElement.value);

타입 매개변수​

TFn​

TFn extends AnyAsyncFunction

생성자​

생성자​

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

정의 위치: async-debouncer.ts:229

매개변수​

fn​

TFn

initialOptions​

AsyncDebouncerOptions&lt;TFn>

반환값​

AsyncDebouncer&lt;TFn>

속성​

asyncRetryers​

asyncRetryers: Map<number, AsyncRetryer<TFn>>;

정의 위치: async-debouncer.ts:224

fn​

fn: TFn;

정의 위치: async-debouncer.ts:230

key​

key: string | undefined;

정의 위치: async-debouncer.ts:222

options​

options: AsyncDebouncerOptions<TFn>;

정의 위치: async-debouncer.ts:223

store​

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

정의 위치: async-debouncer.ts:219

메서드​

abort()​

abort(): void;

정의 위치: async-debouncer.ts:470

내부 중단 컨트롤러를 사용하여 진행 중인 모든 실행을 중단합니다. 아직 시작되지 않은 대기 중인 실행은 취소하지 않습니다.

반환값​

void

cancel()​

cancel(): void;

정의 위치: async-debouncer.ts:482

아직 시작되지 않은 대기 중인 실행을 모두 취소합니다. 이미 진행 중인 실행은 중단하지 않습니다.

반환값​

void

flush()​

flush(): Promise<Awaited<ReturnType<TFn>> | undefined>;

정의 위치: async-debouncer.ts:405

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

반환값​

Promise&lt;Awaited&lt;ReturnType&lt;TFn>> | undefined>

getAbortSignal()​

getAbortSignal(maybeExecuteCount?): AbortSignal | null;

정의 위치: async-debouncer.ts:460

특정 실행의 AbortSignal을 반환합니다. maybeExecuteCount를 제공하지 않으면 가장 최근 실행의 시그널을 반환합니다. 실행을 찾을 수 없거나 현재 실행 중이 아니면 null을 반환합니다.

매개변수​

maybeExecuteCount?​

number

시그널을 가져올 특정 실행을 선택적으로 지정합니다

반환값​

AbortSignal | null

예시​

const debouncer = new AsyncDebouncer(
  async (searchTerm: string) => {
    const signal = debouncer.getAbortSignal()
    if (signal) {
      const response = await fetch(`/api/search?q=${searchTerm}`, { signal })
      return response.json()
    }
  },
  { wait: 300 }
)

maybeExecute()​

maybeExecute(...args): Promise<Awaited<ReturnType<TFn>> | undefined>;

정의 위치: async-debouncer.ts:317

디바운스된 함수의 실행을 시도합니다. 호출이 이미 진행 중이면 큐에 추가됩니다.

오류 처리:

  • 디바운스된 함수에서 오류를 던지고 onError 핸들러가 구성되지 않은 경우 이 메서드에서 오류를 던집니다.
  • onError 핸들러가 구성된 경우 오류를 포착하여 핸들러에 전달하고 이 메서드는 undefined를 반환합니다.
  • getErrorCount()와 getIsExecuting()을 사용하여 오류 상태를 확인할 수 있습니다.

매개변수​

args​

...Parameters&lt;TFn>

반환값​

Promise&lt;Awaited&lt;ReturnType&lt;TFn>> | undefined>

함수의 반환값으로 이행되는 Promise입니다. 오류가 발생하고 onError에서 처리한 경우에는 undefined입니다

발생 오류​

onError 핸들러가 구성되지 않은 경우 디바운스된 함수에서 발생한 오류입니다

reset()​

reset(): void;

정의 위치: async-debouncer.ts:490

AsyncDebouncer 상태를 기본값으로 재설정합니다

반환값​

void

setOptions()​

setOptions(newOptions): void;

정의 위치: async-debouncer.ts:257

AsyncDebouncer 옵션을 업데이트합니다

매개변수​

newOptions​

Partial&lt;AsyncDebouncerOptions&lt;TFn>>

반환값​

void