Svelte DerivedStoreアトミック/デバウンスアップデート

Question

私は洗練された派生ストアで実験してきました。次の例のコンソールログを見ると、ストア1とストア2をインクリメントし、リセットを押した後、派生ストアは2つの更新を発行します。

このアトミックをどのように作成しますか、それともデバウンスしますか？たとえば、派生ストアがストア1と2の合計値に基づいて新しいネットワーク要求を発行した場合、両方が一緒に変更された場合、2つのネットワーク要求を発生させたくないとしましょう。

https://svelte.dev/repl/a67c9d37aee348d988e8c30f60a139d9?version=3.28.0

編集：実際には、「リアクティブ」コンソールログを追加しただけで、これは出力をデバウンス（カチカチ？）しているように見えます。

私は自分の質問に答えたと思いますか？

Answer 1

派生ストアのコールバックの2番目の引数はですset。これにより、派生値を非同期に設定できます。

import { derived } from 'svelte/store';

const delayed = derived(a, ($a, set) => { setTimeout(() => set($a), 1000);
});

$: console.log($delayed);

$a = 1;
// console '1' 1 second later.

のAPIリファレンス derived()

---

あなたの場合、最終的に以下を呼び出すデバウンス関数を呼び出すことができますset：

// implementing debounce yourself
let timeoutId;
const total = derived([counter1, counter2], ([c1,c2], set) => {
    if (timeoutId) {
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
        console.log(c1, c2);
        return set(c1+c2);
    }, 1000);
}, 0);

Svelte REPL