主页 / coding / 问题 / 78906849
Accepted
Fred Hors
Asked: 2024-08-24 00:42:45 +0800 CST

有没有办法消除 Svelte 5 $derived 值的抖动？

  • 772

我尝试过：

let searchText = $derived(debounce((typedText) => typedText, 2000)(typedText));

但searchText沒有分配！

  1. $derived带有: 的复制品searchText未被指定。

  2. 复现$effect()：searchText分配根本没有去抖动。

svelte

1 个回答

  1. Best Answer

    一个debounce函数只能被调用一次，否则就会得到具有独立超时的新实例。

    使用$effect：

    const update = debounce(v => searchText = v, 300);
$effect(() => update(typedText));

    该逻辑可以包装成与以下内容兼容$derived.by：

    function debouncer(getter, wait, immediate) {
    let current = $state();
    const update = debounce(v => current = v, wait, immediate);
    $effect(() => update(getter()));

    return () => current;
}

let typedText = $state();
const searchText = $derived.by(debouncer(() => typedText, 300));
    • 2

相关问题