createDebouncedValue
函数：createDebouncedValue()
ts
function createDebouncedValue<TValue>(value, initialOptions): [Accessor<TValue>, SolidDebouncer<Setter<TValue>>]
function createDebouncedValue<TValue>(value, initialOptions): [Accessor<TValue>, SolidDebouncer<Setter<TValue>>]
定义于：debouncer/createDebouncedValue.ts:41
一个 Solid 钩子，用于创建一个仅在指定延迟后更新的防抖值。 与 createDebouncedSignal 不同，此钩子自动跟踪输入值的更改并相应地更新防抖值。
防抖值仅在自输入值上次更改以来经过指定的等待时间后才会更新。 如果输入值在等待时间到期之前再次更改，计时器将重置并重新开始等待。
这对于从频繁更改的 props 或 state（例如搜索查询或表单输入）派生防抖值非常有用， 在这些情况下，您希望限制下游效应或计算的发生频率。
该钩子返回一个包含以下内容的元组：
- 提供当前防抖值的 Accessor
- 具有控制方法的防抖器实例
类型参数
• TValue
参数
value
Accessor<TValue>
initialOptions
DebouncerOptions<Setter<TValue>>
返回
[Accessor<TValue>, SolidDebouncer<Setter<TValue>>]
示例
tsx
// 防抖搜索查询
const [searchQuery, setSearchQuery] = createSignal('');
const [debouncedQuery, debouncer] = createDebouncedValue(searchQuery, {
wait: 500 // 最后一次更改后等待 500 毫秒
});
// debouncedQuery 将在 searchQuery 停止更改 500 毫秒后更新
createEffect(() => {
fetchSearchResults(debouncedQuery());
});
// 控制防抖器
debouncer.cancel(); // 取消任何挂起的更新
// 防抖搜索查询
const [searchQuery, setSearchQuery] = createSignal('');
const [debouncedQuery, debouncer] = createDebouncedValue(searchQuery, {
wait: 500 // 最后一次更改后等待 500 毫秒
});
// debouncedQuery 将在 searchQuery 停止更改 500 毫秒后更新
createEffect(() => {
fetchSearchResults(debouncedQuery());
});
// 控制防抖器
debouncer.cancel(); // 取消任何挂起的更新
