防抖器
类: Debouncer<TFn>
定义于: debouncer.ts:129
创建一个防抖函数的类。
防抖确保函数仅在自上次调用后经过一段时间后才会被执行。这对于处理频繁事件（如窗口大小调整、滚动事件或输入更改）非常有用，因为您希望限制执行速率。
防抖函数可以配置为在延迟周期的开始（前沿）或结束（后沿，默认）执行。在等待期间的每个新调用都会重置计时器。
状态管理
- 使用 TanStack Store 进行响应式状态管理
- 使用 initialState 在创建防抖函数时提供初始状态值
- 使用 onExecute 回调来响应函数执行并实现自定义逻辑
- 状态包括 canLeadingExecute、执行计数和 isPending 状态
- 直接使用类时，可以通过 debouncer.store.state 访问状态
- 使用框架适配器（React/Solid）时，状态通过 debouncer.state 访问
示例
ts
const debouncer = new Debouncer((value: string) => {
saveToDatabase(value);
}, { wait: 500 });
// Will only save after 500ms of no new input
inputElement.addEventListener('input', () => {
debouncer.maybeExecute(inputElement.value);
});
const debouncer = new Debouncer((value: string) => {
saveToDatabase(value);
}, { wait: 500 });
// Will only save after 500ms of no new input
inputElement.addEventListener('input', () => {
debouncer.maybeExecute(inputElement.value);
});
类型参数
• TFn extends AnyFunction
构造函数
new Debouncer()
ts
new Debouncer<TFn>(fn, initialOptions): Debouncer<TFn>
new Debouncer<TFn>(fn, initialOptions): Debouncer<TFn>
定义于: debouncer.ts:137
参数
fn
TFn
initialOptions
DebouncerOptions<TFn>
Returns (返回)
Debouncer<TFn>
属性
fn
ts
fn: TFn;
fn: TFn;
定义于: debouncer.ts:138
key
ts
key: string;
key: string;
定义于: debouncer.ts:133
options
ts
options: DebouncerOptions<TFn>;
options: DebouncerOptions<TFn>;
定义于: debouncer.ts:134
store
ts
readonly store: Store<Readonly<DebouncerState<TFn>>>;
readonly store: Store<Readonly<DebouncerState<TFn>>>;
定义于: debouncer.ts:130
方法
cancel()
ts
cancel(): void
cancel(): void
定义于: debouncer.ts:268
取消任何待处理的执行
Returns (返回)
void
flush()
ts
flush(): void
flush(): void
定义于: debouncer.ts:251
立即处理当前挂起的执行
Returns (返回)
void
maybeExecute()
ts
maybeExecute(...args): void
maybeExecute(...args): void
定义于: debouncer.ts:204
尝试执行防抖函数。如果已有调用正在进行，它将被加入队列
参数
args
...Parameters<TFn>
Returns (返回)
void
reset()
ts
reset(): void
reset(): void
定义于: debouncer.ts:279
将去抖器状态重置为其默认值
Returns (返回)
void
setOptions()
ts
setOptions(newOptions): void
setOptions(newOptions): void
定义于: debouncer.ts:158
更新防抖函数选项
参数
newOptions
Partial<DebouncerOptions<TFn>>
Returns (返回)
void
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。