Svelte 5中如何为$derived值实现防抖？

问题根源 #

你原来的写法有两个核心问题：

• 直接在$derived中执行防抖函数，而防抖函数是异步延迟返回结果的，$derived会同步获取到防抖函数的返回值（初始为undefined），导致searchText无法被正确赋值。
• 如果在$effect里每次都重新创建防抖函数，会导致每次触发时都生成新的定时器实例，旧的定时器无法被清除，自然没有防抖效果。

正确实现方式 #

方式1：用$effect配合独立防抖函数 #

这是最可靠的写法，把防抖函数抽离出来，避免每次$effect执行时重新创建：

// 假设typedText是你的输入响应式变量
let typedText = $state('');
// 存储防抖后的结果
let searchText = $state('');

// 通用防抖函数
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

// 创建一次性的防抖更新函数
const debouncedUpdate = debounce((text) => {
  searchText = text;
}, 2000);

// 监听输入变化，调用防抖函数
$effect(() => {
  debouncedUpdate(typedText);
});

方式2：结合$derived的写法（需额外状态） #

如果一定要用$derived，可以先通过$effect更新防抖后的状态，再用$derived基于该状态做后续计算：

let typedText = $state('');
let _debouncedText = $state('');

const debouncedUpdate = debounce((text) => {
  _debouncedText = text;
}, 2000);

$effect(() => {
  debouncedUpdate(typedText);
});

// 基于防抖后的状态派生新值
let searchText = $derived(_debouncedText.toUpperCase()); // 示例：转大写

关键注意事项 #

• 防抖函数必须只创建一次，不能放在$effect的回调内部，否则每次$effect触发都会生成新的防抖函数，定时器无法复用，防抖失效。
• $derived是同步计算的，无法直接处理异步延迟的结果，必须依赖一个提前更新好的响应式状态。

内容的提问来源于stack exchange，提问作者Fred Hors