FileSystemObserver.disconnect() — Methode · JavaScript-Referenz

Signatur

FileSystemObserver.prototype.disconnect()

Beschreibung

Die Methode disconnect() der Schnittstelle FileSystemObserver beendet alle laufenden Beobachtungen. Dazu gehören alle Dateien und Verzeichnisse, die vorher mit observe() angemeldet wurden. Danach ruft der Browser den Callback nicht mehr auf.

Rufen Sie disconnect() auf, wenn keine Änderungen mehr gemeldet werden sollen. Typische Fälle:

Eine Komponente wird ausgehängt, zum Beispiel ein Editor-Tab wird geschlossen.
Nutzerinnen und Nutzer wählen einen anderen Projektordner.
Die Seite wird verlassen.

So vermeiden Sie Speicherlecks, unnötige Aufrufe des Callbacks und Zugriffe auf FileSystemHandle-Objekte, die nicht mehr gebraucht werden.

Wollen Sie nur einen einzelnen Handle abmelden, nehmen Sie unobserve(handle). disconnect() wirkt dagegen auf alle Beobachtungen dieser Instanz. Die Instanz selbst bleibt danach nutzbar: Mit einem neuen Aufruf von observe() können Sie die Beobachtung wieder starten.

Beispiele

Verzeichnis beobachten und nach 30 Sekunden trennen

const observer = new FileSystemObserver((records) => {
  for (const { type, relativePathComponents } of records) {
    console.log(type, relativePathComponents.join('/'));
  }
});

const dirHandle = await window.showDirectoryPicker();
await observer.observe(dirHandle, { recursive: true });

// Beobachtung nach 30 Sekunden vollständig beenden
setTimeout(() => {
  observer.disconnect();
  console.log('Beobachtung beendet');
}, 30_000);

modified src/index.js appeared notes.txt Beobachtung beendet

Aufräumen beim Verlassen der Seite

const observer = new FileSystemObserver((records) => {
  console.log(`${records.length} Änderung(en) erkannt`);
});

const root = await navigator.storage.getDirectory(); // OPFS
await observer.observe(root, { recursive: true });

// Beim Verlassen der Seite alle Beobachtungen freigeben
window.addEventListener('pagehide', () => observer.disconnect());

Projektordner wechseln – alte Beobachtung trennen, neue starten

const observer = new FileSystemObserver((records) => {
  records.forEach((r) => console.log(r.type, r.changedHandle.name));
});

const openProject = async () => {
  const dir = await window.showDirectoryPicker();
  observer.disconnect();          // alle bisherigen Beobachtungen beenden
  await observer.observe(dir, { recursive: true }); // dieselbe Instanz wiederverwenden
  console.log(`Beobachte jetzt: ${dir.name}`);
};

document.querySelector('#open').addEventListener('click', openProject);

Beobachte jetzt: mein-projekt

Feature-Erkennung vor der Nutzung

if ('FileSystemObserver' in globalThis) {
  const observer = new FileSystemObserver(() => {});
  const root = await navigator.storage.getDirectory();
  await observer.observe(root);
  observer.disconnect();
  console.log('FileSystemObserver unterstützt');
} else {
  console.log('FileSystemObserver nicht verfügbar – auf Polling ausweichen');
}

FileSystemObserver unterstützt

// Wichtig · Fallstricke

Experimentelle API: FileSystemObserver ist bisher nur in Chromium-Browsern verfügbar und noch nicht standardisiert. Firefox und Safari unterstützen die API nicht. Prüfen Sie deshalb immer vorher, ob sie vorhanden ist: 'FileSystemObserver' in globalThis.
disconnect() betrifft alle Beobachtungen: Für einen einzelnen Handle verwenden Sie unobserve(handle).
Offene Datensätze: Nach disconnect() werden keine neuen Datensätze mehr gemeldet. Änderungen, die in der Zwischenzeit passieren, sind verloren. Sie werden auch dann nicht nachgeliefert, wenn Sie danach wieder observe() aufrufen.
Race Condition: observe() gibt ein Promise zurück. Wenn Sie disconnect() aufrufen, bevor dieses Promise erfüllt ist, kann die Beobachtung trotzdem noch starten. Warten Sie deshalb mit await auf observe(), bevor Sie trennen.
Ein mehrfacher Aufruf von disconnect() ist unbedenklich und wirft keinen Fehler.
Die API funktioniert nur in einem sicheren Kontext (HTTPS). Sie gilt für das Origin Private File System (OPFS) und für Handles aus showDirectoryPicker() bzw. showOpenFilePicker().

Siehe auch

FileSystemDirectoryHandle.resolve() FileSystemObserver.observe() PressureObserver.disconnect() ResizeObserver.disconnect() IntersectionObserver.disconnect()