useAsyncDebouncer

函数：useAsyncDebouncer()

function useAsyncDebouncer<TFn>(fn, options): AsyncDebouncer<TFn>

function useAsyncDebouncer<TFn>(fn, options): AsyncDebouncer<TFn>

定义于：react-pacer/src/async-debouncer/useAsyncDebouncer.ts:60

一个低级别的 React 钩子，用于创建一个 AsyncDebouncer 实例来延迟异步函数的执行。

此钩子设计灵活且与状态管理无关——它仅返回一个防抖器实例，您可以将其与任何状态管理解决方案（useState、Redux、Zustand、Jotai 等）集成。

异步防抖确保异步函数仅在其最后一次调用后经过指定的延迟后才执行。每次新的调用都会重置延迟计时器。这对于处理频繁事件（如窗口大小调整）非常有用或输入更改，您只想在事件停止发生后执行处理程序。

与节流（允许定期执行）不同，防抖会阻止任何执行，直到函数在指定的延迟期内停止被调用。

与非异步 Debouncer 不同，此异步版本支持从防抖函数返回值，使其非常适合 API 调用和其他异步操作，在这些操作中，您希望获得 maybeExecute 调用的结果而不是在防抖函数内部设置状态变量的结果。

错误处理：

如果提供了 onError 处理程序，它将与错误和防抖器实例一起被调用
如果 throwOnError 为 true（未提供 onError 处理程序时的默认值），则会抛出错误
如果 throwOnError 为 false（提供 onError 处理程序时的默认值），则会吞没错误
onError 和 throwOnError 可以一起使用——处理程序将在抛出任何错误之前被调用
可以使用底层的 AsyncDebouncer 实例检查错误状态

类型参数

• TFn extends AnyAsyncFunction

参数

fn

TFn

options

AsyncDebouncerOptions<TFn>

AsyncDebouncer<TFn>

示例

tsx

// 基本 API 调用防抖
const { maybeExecute } = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 }
);

// 结合状态管理
const [results, setResults] = useState([]);
const { maybeExecute } = useAsyncDebouncer(
  async (searchTerm) => {
    const data = await searchAPI(searchTerm);
    setResults(data);
  },
  {
    wait: 300,
    leading: true,   // 首次调用立即执行
    trailing: false, // 跳过尾随边缘更新
    onError: (error) => {
      console.error('API 调用失败：', error);
    }
  }
);

// 基本 API 调用防抖
const { maybeExecute } = useAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 }
);

// 结合状态管理
const [results, setResults] = useState([]);
const { maybeExecute } = useAsyncDebouncer(
  async (searchTerm) => {
    const data = await searchAPI(searchTerm);
    setResults(data);
  },
  {
    wait: 300,
    leading: true,   // 首次调用立即执行
    trailing: false, // 跳过尾随边缘更新
    onError: (error) => {
      console.error('API 调用失败：', error);
    }
  }
);