Svelte Derived Store atomare / entprellte Updates

Question

Ich habe mit schlanken Geschäften experimentiert. Wenn Sie sich das Konsolenprotokoll im folgenden Beispiel ansehen, nachdem Sie Speicher 1 und Speicher 2 erhöht und dann auf Zurücksetzen geklickt haben, gibt der abgeleitete Speicher zwei Aktualisierungen aus.

Wie würden Sie dieses Atom machen oder es vielleicht entprellen? Angenommen, das Szenario bestand darin, dass der abgeleitete Speicher eine neue Netzwerkanforderung basierend auf den kombinierten Werten von Speicher 1 und 2 ausgegeben hat. Wenn beide zusammen geändert werden, möchten Sie nicht zwei Netzwerkanforderungen auslösen.

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

BEARBEITEN: Eigentlich wurde gerade ein 'reaktives' Konsolenprotokoll hinzugefügt, und dies scheint die Ausgabe zu entprellen (ankreuzen?).

Ich glaube ich habe meine eigene Frage beantwortet?

Answer 1

Das zweite Rückrufargument des abgeleiteten Speichers lautet set, mit dem der abgeleitete Wert asynchron festgelegt werden kann.

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-Referenz für derived()

---

In Ihrem Fall können Sie eine Entprellungsfunktion aufrufen, die schließlich Folgendes aufruft 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