异步防抖器
类: AsyncDebouncer<TFn>
一个创建异步防抖函数的类。
防抖确保函数仅在自上次调用指定延迟时间后才会被执行。每次新调用都会重置延迟计时器。这对于处理频繁事件（如窗口大小调整或输入更改）非常有用，您只希望在事件停止发生后执行处理程序。
与节流（节流允许在固定间隔内执行）不同，防抖会阻止任何执行，直到函数在指定的延迟时间内停止被调用。
与非异步 Debouncer 不同，此异步版本支持从防抖函数返回值为 API 调用和其他异步操作提供了理想的解决方案，您希望获得 maybeExecute 调用的结果，而不是在防抖函数内部将结果设置到状态变量中。
错误处理
- 如果提供了 onError 处理程序，它将使用错误和 debouncer 实例被调用
- 如果 throwOnError 为 true（当没有提供 onError 处理程序时的默认值），错误将被抛出
- 如果 throwOnError 为 false（当提供 onError 处理程序时的默认值），错误将被吞没
- onError 和 throwOnError 可以一起使用 - 在任何错误被抛出之前，处理程序都会被调用
- 可以通过底层存储检查错误状态
状态管理
- 防抖器使用响应式存储进行状态管理
- 使用 initialState 在创建异步防抖器时提供初始状态值
- 状态包含 canLeadingExecute、错误计数、执行状态以及成功/结算计数
- 可以通过 store 属性及其 state getter 访问状态
- 该存储是响应式的，并将通知订阅者状态更改
示例
ts
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);
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 extends AnyAsyncFunction
构造函数
new AsyncDebouncer()
ts
new AsyncDebouncer<TFn>(fn, initialOptions): AsyncDebouncer<TFn>
new AsyncDebouncer<TFn>(fn, initialOptions): AsyncDebouncer<TFn>
参数
fn
TFn
initialOptions
Returns (返回)
AsyncDebouncer<TFn>
属性
fn
ts
fn: TFn;
fn: TFn;
key
ts
key: string;
key: string;
options
ts
options: AsyncDebouncerOptions<TFn>;
options: AsyncDebouncerOptions<TFn>;
store
ts
readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
readonly store: Store<Readonly<AsyncDebouncerState<TFn>>>;
方法
cancel()
ts
cancel(): void
cancel(): void
取消任何待处理的执行或中止任何正在进行的执行
Returns (返回)
void
flush()
ts
flush(): Promise<undefined | ReturnType<TFn>>
flush(): Promise<undefined | ReturnType<TFn>>
立即处理当前挂起的执行
Returns (返回)
Promise<undefined | ReturnType<TFn>>
maybeExecute()
ts
maybeExecute(...args): Promise<undefined | ReturnType<TFn>>
maybeExecute(...args): Promise<undefined | ReturnType<TFn>>
尝试执行防抖函数。如果已有调用正在进行，它将被加入队列。
错误处理
- 如果防抖函数抛出错误且未配置 onError 处理程序，则该错误将从此方法抛出。
- 如果配置了 onError 处理程序，错误将被捕获并传递给处理程序，并且此方法将返回 undefined。
- 可以使用 getErrorCount() 和 getIsExecuting() 检查错误状态。
参数
args
...Parameters<TFn>
Returns (返回)
Promise<undefined | ReturnType<TFn>>
一个 Promise，它会解析为函数的返回值，如果错误被 onError 处理，则返回 undefined
Throws
防抖函数产生的错误（如果未配置 onError 处理程序）
reset()
ts
reset(): void
reset(): void
将去抖器状态重置为其默认值
Returns (返回)
void
setOptions()
ts
setOptions(newOptions): void
setOptions(newOptions): void
更新异步防抖器选项
参数
newOptions
Partial<AsyncDebouncerOptions<TFn>>
Returns (返回)
void
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。