createDebouncedSignal

函数：createDebouncedSignal()

function createDebouncedSignal<TValue>(value, initialOptions): [Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>>]

function createDebouncedSignal<TValue>(value, initialOptions): [Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>>]

定义于：debouncer/createDebouncedSignal.ts:46

一个 Solid 钩子，用于创建防抖状态值，将 Solid 的 createSignal 与防抖功能相结合。此钩子提供当前的防抖值以及更新它的方法。

状态值仅在自上次更新尝试以来经过指定的等待时间后才更新。如果在等待时间到期之前尝试另一次更新，计时器将重置并重新开始等待。这对于处理应进行节流的频繁状态更新非常有用，例如搜索输入值或窗口大小调整尺寸。

该钩子返回一个包含以下内容的元组：

当前的防抖值访问器
用于更新防抖值的函数
具有其他控制方法和状态信号的防抖器实例

类型参数

• TValue

参数

value

TValue

initialOptions

DebouncerOptions<Setter<TValue>>

[Accessor<TValue>, Setter<TValue>, SolidDebouncer<Setter<TValue>>]

示例

tsx

// 防抖搜索输入
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
  wait: 500 // 最后一次按键后等待 500 毫秒
});

// 更新值 - 将进行防抖
const handleChange = (e) => {
  setSearchTerm(e.target.value);
};

// 通过信号访问防抖器状态
console.log('执行次数：', debouncer.executionCount());
console.log('是否待处理：', debouncer.isPending());

// 在 onExecute 回调中，使用 get* 方法
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
  wait: 500,
  onExecute: (debouncer) => {
    console.log('总执行次数：', debouncer.getExecutionCount());
  }
});

// 防抖搜索输入
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
  wait: 500 // 最后一次按键后等待 500 毫秒
});

// 更新值 - 将进行防抖
const handleChange = (e) => {
  setSearchTerm(e.target.value);
};

// 通过信号访问防抖器状态
console.log('执行次数：', debouncer.executionCount());
console.log('是否待处理：', debouncer.isPending());

// 在 onExecute 回调中，使用 get* 方法
const [searchTerm, setSearchTerm, debouncer] = createDebouncedSignal('', {
  wait: 500,
  onExecute: (debouncer) => {
    console.log('总执行次数：', debouncer.getExecutionCount());
  }
});