Я попробовал с:
let searchText = $derived(debounce((typedText) => typedText, 2000)(typedText));
Но searchText не присвоен!
Воспроизведение с $derived: searchText не назначается.
Воспроизведение с помощью $effect(): searchText присваивание вообще не отменяется.
🤔 А знаете ли вы, что...
С Svelte можно создавать адаптивные интерфейсы для различных устройств и экранов.
Функцию 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));