函数: createDebouncer()

function createDebouncer<TFn, TSelected>(
   fn, 
   initialOptions, 
selector): SolidDebouncer<TFn, TSelected>

function createDebouncer<TFn, TSelected>(
   fn, 
   initialOptions, 
selector): SolidDebouncer<TFn, TSelected>

定义于: debouncer/createDebouncer.ts:103

一个 Solid hook，用于创建和管理 Debouncer 实例。

这是一个低级 hook，可以直接访问 Debouncer 的功能，而无需内置状态管理。这允许您将其集成到您喜欢的任何状态管理解决方案中（createSignal、Redux、Zustand 等）。

此 hook 提供防抖功能，以限制函数被调用的频率，在指定延迟之前执行最新调用。这对于处理窗口大小调整、滚动事件或实时搜索输入等频繁事件非常有用。

防抖器仅在自上次调用以来经过指定的等待时间后才会执行函数。如果在等待时间到期前再次调用该函数，计时器将重置并重新开始等待。

状态管理和选择器

该 hook 使用 TanStack Store 进行响应式状态管理。 selector 参数允许您指定哪些状态更改将触发重新渲染，通过防止不相关的状态更改发生不必要的重新渲染来优化性能。

默认情况下，不会进行任何响应式状态订阅，您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供 selector 时，组件才会在选定的状态值发生变化时重新渲染。

可用的状态属性

canLeadingExecute: debouncer 是否可以在前沿执行
executionCount: 已完成的函数执行次数
isPending: 防抖器是否正在等待超时触发执行
lastArgs: Последний вызов maybeExecute 的参数
status: 当前执行状态（“disabled” | “idle” | “pending”）

类型参数

• TFn extends AnyFunction

• TSelected = {}

参数

fn

TFn

initialOptions

DebouncerOptions<TFn>

选择器

(state) => TSelected

Returns (返回)

SolidDebouncer<TFn, TSelected>

示例

tsx

// Default behavior - no reactive state subscriptions
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 }
);

// Opt-in to re-render when isPending changes (optimized for loading states)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - re-render when any of these change
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    status: state.status
  })
);

// In an event handler
const handleChange = (e) => {
  debouncer.maybeExecute(e.target.value);
};

// Access the selected state (will be empty object {} unless selector provided)
const { isPending } = debouncer.state();

// Default behavior - no reactive state subscriptions
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 }
);

// Opt-in to re-render when isPending changes (optimized for loading states)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - re-render when any of these change
const debouncer = createDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    status: state.status
  })
);

// In an event handler
const handleChange = (e) => {
  debouncer.maybeExecute(e.target.value);
};

// Access the selected state (will be empty object {} unless selector provided)
const { isPending } = debouncer.state();

createDebouncer