createThrottledSignal
函数: createThrottledSignal()
ts
function createThrottledSignal<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, Setter<TValue>, SolidThrottler<Setter<TValue>, TSelected>]
function createThrottledSignal<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, Setter<TValue>, SolidThrottler<Setter<TValue>, TSelected>]
定义于: throttler/createThrottledSignal.ts:72
一个 Solid hook，用于创建一个节流状态值，该值在一个指定的时间窗口内最多更新一次。此 hook 结合了 Solid 的 createSignal 和节流功能，以提供受控的状态更新。
节流确保状态更新以受控的速率发生，而不管调用 setter 的频率如何。这对于限制昂贵的重新渲染或依赖于快速变化状态的操作非常有用。
该 hook 返回一个元组，包含：
- 节流状态值访问器
- 一个节流的 setter 函数，遵循配置的等待时间
- 用于进一步控制的节流实例
如果您想在不进行状态管理的情况下更直接地控制节流，请考虑使用更底层的 createThrottler hook。
状态管理和选择器
该 hook 使用 TanStack Store 通过底层的节流实例进行响应式状态管理。selector 参数允许您指定哪些节流状态更改将触发响应式更新，通过防止不相关的状态更改时发生不必要的订阅来优化性能。
默认情况下，将不会有响应式状态订阅，您必须通过提供一个 selector 函数来选择加入状态跟踪。这可以防止不必要的响应式更新，并让您完全控制组件何时订阅状态更改。只有当您提供一个 selector 时，响应式系统才会跟踪选定的状态值。
可用的节流器状态属性
- canLeadingExecute: 节流器是否可以在前沿执行
- canTrailingExecute: 节流器是否可以在后沿执行
- executionCount: 已完成的函数执行次数
- isPending: 节流器是否正在等待触发后沿执行的超时
- lastArgs: Последний вызов maybeExecute 的参数
- lastExecutionTime: 上次执行的 Unix 时间戳
- nextExecutionTime: 下一次允许执行的 Unix 时间戳
- status: 当前执行状态（“disabled” | “idle” | “pending”）
类型参数
• TValue
• TSelected = {}
参数
value
TValue
initialOptions
ThrottlerOptions<Setter<TValue>>
选择器?
(state) => TSelected
Returns (返回)
[Accessor<TValue>, Setter<TValue>, SolidThrottler<Setter<TValue>, TSelected>]
示例
tsx
// Default behavior - no reactive state subscriptions
const [value, setValue, throttler] = createThrottledSignal(0, { wait: 1000 });
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [value, setValue, throttler] = createThrottledSignal(
0,
{ wait: 1000 },
(state) => ({ isPending: state.isPending })
);
// With custom leading/trailing behavior
const [value, setValue] = createThrottledSignal(0, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access throttler state via signals
console.log('Executions:', throttler.state().executionCount);
console.log('Is pending:', throttler.state().isPending);
console.log('Last execution:', throttler.state().lastExecutionTime);
console.log('Next execution:', throttler.state().nextExecutionTime);
// Default behavior - no reactive state subscriptions
const [value, setValue, throttler] = createThrottledSignal(0, { wait: 1000 });
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [value, setValue, throttler] = createThrottledSignal(
0,
{ wait: 1000 },
(state) => ({ isPending: state.isPending })
);
// With custom leading/trailing behavior
const [value, setValue] = createThrottledSignal(0, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access throttler state via signals
console.log('Executions:', throttler.state().executionCount);
console.log('Is pending:', throttler.state().isPending);
console.log('Last execution:', throttler.state().lastExecutionTime);
console.log('Next execution:', throttler.state().nextExecutionTime);
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。