createThrottler
函数: createThrottler()
ts
function createThrottler<TFn, TSelected>(
fn,
initialOptions,
selector): SolidThrottler<TFn, TSelected>
function createThrottler<TFn, TSelected>(
fn,
initialOptions,
selector): SolidThrottler<TFn, TSelected>
定义于: throttler/createThrottler.ts:99
一个低级别的 Solid hook，它创建一个 Throttler 实例，限制提供的函数可以执行的频率。
此 hook 设计灵活且与状态管理无关——它仅返回一个 throttler 实例，您可以将其集成到任何状态管理解决方案中（createSignal, Redux, Zustand, Jotai 等）。对于一个更简单、更高级别的 hook，它直接与 Solid 的 createSignal 集成，请参阅 createThrottledSignal。
节流确保一个函数在指定的窗口时间内最多执行一次，无论它被调用多少次。这对于限制昂贵操作或 UI 更新的速率非常有用。
状态管理和选择器
该 hook 使用 TanStack Store 进行响应式状态管理。selector 参数允许您指定哪些状态更改会触发重新渲染，通过防止不必要的重新渲染来优化性能，当不相关的状态发生变化时，可以防止不必要的重新渲染。
默认情况下，不会有响应式状态订阅，您必须提供一个 selector 函数来选择启用状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供 selector 时，组件才会在选定的状态值更改时重新渲染。
可用的状态属性
- canLeadingExecute: 节流器是否可以在前沿执行
- canTrailingExecute: 节流器是否可以在后沿执行
- executionCount: 已完成的函数执行次数
- isPending：节流器是否正在等待超时触发执行
- lastArgs: Последний вызов maybeExecute 的参数
- lastExecutionTime: 上次执行的时间戳
- nextExecutionTime: 下一次允许执行的时间戳
- status: 当前执行状态（“disabled” | “idle” | “pending”）
类型参数
• TFn extends AnyFunction
• TSelected = {}
参数
fn
TFn
initialOptions
ThrottlerOptions<TFn>
选择器
(state) => TSelected
Returns (返回)
SolidThrottler<TFn, TSelected>
示例
tsx
// Default behavior - no reactive state subscriptions
const throttler = createThrottler(setValue, { wait: 1000 });
// Opt-in to re-render when isPending changes (optimized for loading states)
const throttler = createThrottler(
setValue,
{ wait: 1000 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const throttler = createThrottler(
setValue,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Multiple state properties - re-render when any of these change
const throttler = createThrottler(
setValue,
{
wait: 2000,
leading: true, // Execute immediately on first call
trailing: false // Skip trailing edge updates
},
(state) => ({
isPending: state.isPending,
executionCount: state.executionCount,
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// Access the selected state (will be empty object {} unless selector provided)
const { isPending, executionCount } = throttler.state();
// Default behavior - no reactive state subscriptions
const throttler = createThrottler(setValue, { wait: 1000 });
// Opt-in to re-render when isPending changes (optimized for loading states)
const throttler = createThrottler(
setValue,
{ wait: 1000 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const throttler = createThrottler(
setValue,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Multiple state properties - re-render when any of these change
const throttler = createThrottler(
setValue,
{
wait: 2000,
leading: true, // Execute immediately on first call
trailing: false // Skip trailing edge updates
},
(state) => ({
isPending: state.isPending,
executionCount: state.executionCount,
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// Access the selected state (will be empty object {} unless selector provided)
const { isPending, executionCount } = throttler.state();
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。