Observable: Observable()-Konstruktor
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Der Observable()-Konstruktor erstellt ein neues Observable-Objekt, dessen Werte und Lebenszyklus durch eine Callback-Funktion gesteuert werden.
Syntax
new Observable(callback)
Parameter
callback-
Eine Funktion, die mit der Erzeugung von Werten beginnt, sobald eine Subscription startet. Ihr Rückgabewert wird ignoriert. Die Funktion wird mit dem folgenden Argument aufgerufen:
subscriber-
Ein
Subscriber, mit dem Werte übernext()gesendet, der Abschluss oder ein Fehler übercomplete()beziehungsweiseerror()signalisiert und Bereinigungsaktionen überaddTeardown()registriert werden können.
Rückgabewert
Ein neues Observable-Objekt.
Beschreibung
Der Konstruktor ruft callback nicht sofort auf. Die Funktion wird synchron ausgeführt, wenn sich der erste Observer anmeldet. Weitere Observer verwenden denselben Subscriber, bis dieser inaktiv wird. Bei einer späteren Anmeldung wird die Callback-Funktion mit einem neuen Subscriber erneut gestartet. Weitere Informationen zum Lebenszyklus einer Subscription finden Sie unter Ein Observable erstellen.
Hinweis:
Dieses Verhalten, bei dem sich Observer eine Subscription teilen, kann sich ändern. Ein Vorschlag, jedem Observer einen eigenen Subscriber zu geben, würde dazu führen, dass jede Subscription eine separate Ausführung startet, statt eine aktive Subscription wiederzuverwenden.
Wenn callback eine Ausnahme auslöst, wird diese an subscriber.error() übergeben. Das von einer asynchronen Callback-Funktion zurückgegebene Promise wird ignoriert; eine Ablehnung wird daher nicht automatisch behandelt. Behandeln Sie asynchrone Fehler ausdrücklich und leiten Sie sie mit subscriber.error() weiter, solange der Subscriber aktiv ist.
Beispiele
Elementgröße beobachten
Dieses Beispiel meldet die Abmessungen eines Panels mit veränderbarer Größe. Dazu verwendet es ein benutzerdefiniertes Observable, das auf ResizeObserver basiert. Ein Klick auf „Stop“ beendet die Subscription und trennt die Verbindung zum Observer. Klicken Sie auf „Restart“, um das Panel erneut zu beobachten. Eine ausführlichere Erklärung finden Sie unter Elementgröße beobachten.
const panel = document.querySelector("#panel");
const output = document.querySelector("p");
const btn = document.querySelector("button");
const sizes = new Observable((subscriber) => {
const observer = new ResizeObserver(([entry]) => {
subscriber.next(entry.contentRect);
});
observer.observe(panel);
subscriber.addTeardown(() => observer.disconnect());
});
const restart = document.querySelector("#restart");
function start() {
restart.disabled = true;
sizes.takeUntil(btn.when("click")).subscribe({
next({ width, height }) {
output.textContent = `${Math.round(width)} × ${Math.round(height)} pixels`;
},
complete() {
restart.disabled = false;
},
});
}
restart.when("click").subscribe(start);
start();
Spezifikationen
| Spezifikation |
|---|
| Observable # dom-observable-observable |