Svelteのstoreをdebounceする

表示の更新タイミングを間引いたり、`subscribe()`した時に値が流れてくるペースを抑えたいって場合に使える。

検索文字列をいれるUIとかで、入力フォームはリアルタイムで反映したいけど、APIを叩くペースは落としたいときとか。

コード

import { writable, derived, get } from "svelte/store";

// これがUIでinputに使われる文字列
export const query = writable("");

// こっちをoutputに使う
export const queryDebounced = derived(query, ($query, set) => {
  const timeout = setTimeout(() => set($query), 500);
  return () => clearTimeout(timeout);
}, get(query));

というように、`derived`で遅延させたstoreにするだけでできちゃう。関数を返せばそれがクリーンアップになる。

ということもDocsに書いてあって、Svelteほんと便利やな・・って。

Docs • Svelte