함수: injectAsyncDebouncer()

function injectAsyncDebouncer<TFn, TSelected>(
   fn, 
   options, 
selector): AngularAsyncDebouncer<TFn, TSelected>;

정의 위치: angular-pacer/src/async-debouncer/injectAsyncDebouncer.ts:119

AsyncDebouncer 인스턴스를 생성하고 관리하는 Angular 함수입니다.

AsyncDebouncer 기능에 직접 접근할 수 있게 해 주는 저수준 함수입니다. 원하는 상태 관리 솔루션과 통합할 수 있습니다.

이 함수는 Promise 지원, 오류 처리, 재시도 기능 및 중단을 갖춘 비동기 기능을 제공합니다.

디바운서는 마지막 호출 후 지정된 대기 시간이 지난 뒤에만 함수를 실행합니다. 대기 시간이 끝나기 전에 함수를 다시 호출하면 타이머가 초기화되어 다시 대기하기 시작합니다.

상태 관리와 셀렉터

이 함수는 TanStack Store로 상태를 관리하고 이를 Angular 시그널로 래핑합니다. selector 매개변수로 어떤 상태 변경이 시그널 업데이트를 트리거할지 지정할 수 있으며, 관련 없는 상태가 변경될 때 불필요한 업데이트를 방지하여 성능을 최적화합니다.

기본적으로 반응형 상태 구독은 없습니다. 반응형 상태를 추적하려면 셀렉터 함수를 제공하여 명시적으로 활성화해야 합니다. 이를 통해 불필요한 업데이트를 방지하고 컴포넌트가 상태 변경을 추적할 시점을 완전히 제어할 수 있습니다.

사용할 수 있는 상태 속성은 다음과 같습니다.

• canLeadingExecute: 디바운서가 선행 에지에서 실행될 수 있는지 여부
• errorCount: 오류가 발생한 함수 실행 횟수
• isExecuting: 디바운스된 함수가 현재 비동기로 실행 중인지 여부
• isPending: 디바운서가 타임아웃 후 실행되기를 기다리고 있는지 여부
• lastArgs: 가장 최근 maybeExecute 호출에 전달된 인수
• lastResult: 가장 최근에 성공한 함수 실행 결과
• settleCount: 성공 또는 오류로 완료된 함수 실행 횟수
• status: 현재 실행 상태('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
• successCount: 성공적으로 완료된 함수 실행 횟수

제거 시 정리

기본적으로 컴포넌트가 제거되면 대기 중인 실행을 취소하고 진행 중인 작업을 중단합니다. onUnmount 옵션으로 이 동작을 사용자 지정할 수 있습니다. 예를 들어 대기 중인 작업을 대신 플러시하려면 다음과 같이 설정합니다.

const debouncer = injectAsyncDebouncer(fn, {
  wait: 500,
  onUnmount: (d) => d.flush()
});

onUnmount에서 flush를 사용할 때는 컴포넌트가 이미 제거되었을 수 있으므로 콜백을 안전하게 보호해야 합니다.

타입 매개변수

TFn

TFn extends AnyAsyncFunction

TSelected

TSelected = { }

매개변수

fn

TFn

options

AngularAsyncDebouncerOptions<TFn, TSelected>

selector

(state) => TSelected

반환값

AngularAsyncDebouncer<TFn, TSelected>

예시

// Default behavior - no reactive state subscriptions
const debouncer = injectAsyncDebouncer(
  async (query: string) => {
    const response = await fetch(`/api/search?q=${query}`);
    return response.json();
  },
  { wait: 500 }
);

// Opt-in to track isExecuting changes (optimized for loading states)
const debouncer = injectAsyncDebouncer(
  async (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isExecuting: state.isExecuting, isPending: state.isPending })
);

// In an event handler
const handleChange = async (e: Event) => {
  const target = e.target as HTMLInputElement;
  const result = await debouncer.maybeExecute(target.value);
  console.log('Search results:', result);
};

// Access the selected state
const { isExecuting, errorCount } = debouncer.state();