createThrottledValue
函数：createThrottledValue()
function createThrottledValue<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, SolidThrottler<Setter<TValue>, TSelected>]
function createThrottledValue<TValue, TSelected>(
value,
initialOptions,
selector?): [Accessor<TValue>, SolidThrottler<Setter<TValue>, TSelected>]
定义于：throttler/createThrottledValue.ts:69
一个高级 Solid hook，它创建一个值的节流版本，该版本在指定的时间窗口内最多更新一次。此 hook 内部使用 Solid 的 createSignal 来管理节流状态。
节流确保值更新以受控的速率发生，而不管输入值更改的频率如何。这对于限制依赖于快速变化值的昂贵的重新渲染或 API 调用非常有用。
该 hook 返回一个元组，包含：
- 一个提供节流值的访问器函数
- 包含控制方法的节流器实例
节流值将根据选项中指定的首尾执行行为进行更新。
为了在不进行 Solid 状态管理的情况下更直接地控制节流行为，请考虑使用更底层的 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
Accessor<TValue>
initialOptions
ThrottlerOptions<Setter<TValue>>
选择器?
(state) => TSelected
Returns (返回)
[Accessor<TValue>, SolidThrottler<Setter<TValue>, TSelected>]
示例
// Default behavior - no reactive state subscriptions
const [throttledValue, throttler] = createThrottledValue(rawValue, { wait: 1000 });
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [throttledValue, throttler] = createThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({ isPending: state.isPending })
);
// Use the throttled value
console.log(throttledValue()); // Access the current throttled value
// Access throttler state via signals
console.log('Is pending:', throttler.state().isPending);
// Control the throttler
throttler.cancel(); // Cancel any pending updates
// Default behavior - no reactive state subscriptions
const [throttledValue, throttler] = createThrottledValue(rawValue, { wait: 1000 });
// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [throttledValue, throttler] = createThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({ isPending: state.isPending })
);
// Use the throttled value
console.log(throttledValue()); // Access the current throttled value
// Access throttler state via signals
console.log('Is pending:', throttler.state().isPending);
// Control the throttler
throttler.cancel(); // Cancel any pending updates
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。