createDebouncedValue
函数：createDebouncedValue()
function createDebouncedValue<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
function createDebouncedValue<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
定义于：debouncer/createDebouncedValue.ts:72
一个 Solid hook，用于创建一个延迟更新的防抖值。与 createDebouncedSignal 不同，此 hook 会自动跟踪输入值的变化并相应地更新防抖值。
防抖值仅在自上次输入值更改以来指定的等待时间过去后才会更新。如果在等待时间过期之前输入值再次更改，则计时器将重置并重新开始等待。
这对于从频繁更改的 props 或 state（例如搜索查询或表单输入）派生防抖值很有用，您希望限制下游效果或计算发生的频率。
该 hook 返回一个元组，包含：
- 一个提供当前防抖值的 Accessor
- 具有控制方法的防抖器实例
状态管理和选择器
该 hook 使用 TanStack Store 通过底层的防抖器实例进行响应式状态管理。 selector 参数允许您指定哪些防抖器状态更改将触发响应式更新，通过防止不必要的订阅来优化性能，从而在不相关的状态发生变化时提高效率。仅当您提供 selector 时，响应式系统才会跟踪选定的状态值。
默认情况下，不会有任何响应式状态订阅，您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的响应式更新，并让您完全控制组件何时订阅状态更改。只有当您提供 selector 时，响应式系统才会跟踪选定的状态值。
可用的 debouncer 状态属性
- canLeadingExecute: debouncer 是否可以在前沿执行
- executionCount: 已完成的函数执行次数
- isPending: 防抖器是否正在等待超时触发执行
- lastArgs: Последний вызов maybeExecute 的参数
- status: 当前执行状态（“disabled” | “idle” | “pending”）
类型参数
• TValue
• TSelected = {}
参数
value
Accessor<TValue>
initialOptions
DebouncerOptions<Setter<TValue>>
选择器?
(state) => TSelected
Returns (返回)
[Accessor<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
示例
// Default behavior - no reactive state subscriptions
const [searchQuery, setSearchQuery] = createSignal('');
const [debouncedQuery, debouncer] = createDebouncedValue(searchQuery, {
wait: 500 // Wait 500ms after last change
});
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = createDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// debouncedQuery will update 500ms after searchQuery stops changing
createEffect(() => {
fetchSearchResults(debouncedQuery());
});
// Access debouncer state via signals
console.log('Is pending:', debouncer.state().isPending);
// Control the debouncer
debouncer.cancel(); // Cancel any pending updates
// Default behavior - no reactive state subscriptions
const [searchQuery, setSearchQuery] = createSignal('');
const [debouncedQuery, debouncer] = createDebouncedValue(searchQuery, {
wait: 500 // Wait 500ms after last change
});
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = createDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// debouncedQuery will update 500ms after searchQuery stops changing
createEffect(() => {
fetchSearchResults(debouncedQuery());
});
// Access debouncer state via signals
console.log('Is pending:', debouncer.state().isPending);
// Control the debouncer
debouncer.cancel(); // Cancel any pending updates
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。