본문으로 건너뛰기

함수: useAsyncThrottledCallback()

function useAsyncThrottledCallback<TFn>(fn, options): (...args) => Promise<Awaited<ReturnType<TFn>> | undefined>;

정의 위치: preact-pacer/src/async-throttler/useAsyncThrottledCallback.ts:43

비동기 콜백 함수의 스로틀된 버전을 생성하는 Preact 훅입니다. 이 훅은 useAsyncThrottler 훅을 간편하게 래핑하며, Preact 컴포넌트에서 사용할 수 있는 안정적인 스로틀 비동기 함수 참조를 제공합니다.

스로틀된 비동기 함수는 호출 횟수와 관계없이 지정된 대기 시간 동안 최대 한 번만 실행됩니다. 대기 시간 동안 호출하면 trailing이 활성화된 경우(기본값) 최신 인수를 사용한 단일 후행 실행의 일정을 다시 잡습니다. 가장 최근 호출의 프로미스는 후행 실행 결과로 이행되거나 거부됩니다. 이전 각 호출의 프로미스는 가장 최근의 이전 결과(아직 아무것도 실행되지 않았다면 undefined)로 즉시 이행되며, 스로틀러가 비활성화된 동안의 모든 호출도 마찬가지입니다.

이 훅은 useAsyncThrottler보다 간단한 API를 제공하므로 기본적인 비동기 스로틀 요구 사항에 적합합니다. 그러나 내부 AsyncThrottler 인스턴스는 노출하지 않습니다.

다음과 같은 고급 기능이 필요하다면:

  • 수동 취소
  • 실행/오류 상태 접근
  • 사용자 지정 useCallback 의존성

useAsyncThrottler 훅 사용을 고려합니다.

타입 매개변수​

TFn​

TFn extends AnyAsyncFunction

매개변수​

fn​

TFn

options​

PreactAsyncThrottlerOptions&lt;TFn, { }>

반환값​

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

매개변수​

args​

...Parameters&lt;TFn>

반환값​

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

예시​

// Throttle an async API call
const handleApiCall = useAsyncThrottledCallback(async (data) => {
  const result = await sendDataToServer(data);
  return result;
}, {
  wait: 200 // Execute at most once every 200ms
});

// Use in an event handler
<button onClick={() => handleApiCall(formData)}>Send</button>