createDebouncedSignal
函数：createDebouncedSignal()
ts
function createDebouncedSignal<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
function createDebouncedSignal<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
定义于：debouncer/createDebouncedSignal.ts:81
一个 Solid hook，用于创建一个防抖状态值，将 Solid 的 createSignal 与防抖功能结合。此 hook 同时提供当前防抖值和更新它的方法。
状态值仅在最后一次更新尝试后经过指定的等待时间后才会更新。如果在等待时间到期前尝试了另一次更新，计时器将重置并重新开始等待。这对于处理需要节流的频繁状态更新非常有用，例如搜索输入值或窗口大小调整的尺寸。
该 hook 返回一个元组，包含：
- 当前防抖值访问器
- 更新防抖值的函数
- 带有附加控制方法和状态信号的防抖器实例
状态管理和选择器
该 hook 使用 TanStack Store 通过底层防抖器实例进行响应式状态管理。 selector 参数允许您指定哪些防抖器状态更改将触发响应式更新，通过防止不必要的订阅在不相关的状态更改发生时来优化性能。
默认情况下，将不会有响应式状态订阅，您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的响应式更新，并让您完全控制组件何时订阅状态更改。只有当您提供 selector 时，响应式系统才会跟踪选定的状态值。
可用的 debouncer 状态属性
- canLeadingExecute: debouncer 是否可以在前沿执行
- executionCount: 已完成的函数执行次数
- isPending: 防抖器是否正在等待超时触发执行
- lastArgs: Последний вызов maybeExecute 的参数
- status: 当前执行状态（“disabled” | “idle” | “pending”）
类型参数
• TValue
• TSelected = {}
参数
value
TValue
initialOptions
DebouncerOptions<Setter<TValue>>
选择器?
(state) => TSelected
Returns (返回)
[Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>, TSelected>]
示例
tsx
// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
wait: 500 // Wait 500ms after last keystroke
});
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
'',
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to reactive updates when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
'',
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
// Access debouncer state via signals
console.log('Executions:', debouncer.state().executionCount);
console.log('Is pending:', debouncer.state().isPending);
// In onExecute callback, use get* methods
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
wait: 500,
onExecute: (debouncer) => {
console.log('Total executions:', debouncer.getExecutionCount());
}
});
// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
wait: 500 // Wait 500ms after last keystroke
});
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
'',
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to reactive updates when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal(
'',
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
// Access debouncer state via signals
console.log('Executions:', debouncer.state().executionCount);
console.log('Is pending:', debouncer.state().isPending);
// In onExecute callback, use get* methods
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
wait: 500,
onExecute: (debouncer) => {
console.log('Total executions:', debouncer.getExecutionCount());
}
});
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。