Signatur
Beschreibung
Die Methode disconnect() beendet für eine ResizeObserver-Instanz die Beobachtung aller Ziele (Element oder SVGElement), die vorher mit observe() registriert wurden. Danach wird der Callback nicht mehr aufgerufen, bis Sie mit observe() erneut Ziele hinzufügen.
Einsatzgebiete sind vor allem Aufräumarbeiten: beim Entfernen einer Komponente (z. B. in disconnectedCallback von Web Components, im Cleanup von React-useEffect oder in Vue onUnmounted), beim Schließen eines Dialogs oder wenn eine einmalige Messung erledigt ist. So vermeiden Sie unnötige Callback-Aufrufe und halten keine Referenzen auf Elemente fest, die schon aus dem DOM entfernt wurden.
Wenn Sie nur ein einzelnes Ziel nicht mehr beobachten wollen, nehmen Sie stattdessen unobserve(target). disconnect() wirkt immer auf alle Ziele der Instanz. Die Instanz selbst bleibt gültig und lässt sich weiterverwenden.
Beispiele
Beobachtung nach einer bestimmten Anzahl von Messungen beenden
const box = document.querySelector('#box');
let messungen = 0;
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
const { width, height } = entry.contentRect;
console.log(`Größe: ${Math.round(width)} × ${Math.round(height)}`);
}
messungen += 1;
if (messungen >= 3) {
observer.disconnect(); // alle Ziele freigeben
console.log('Beobachtung beendet');
}
});
observer.observe(box);Aufräumen in einer Web Component
class AutoSizeCard extends HTMLElement {
connectedCallback() {
this.observer = new ResizeObserver(([entry]) => {
const breit = entry.contentBoxSize[0].inlineSize > 400;
this.classList.toggle('breit', breit);
});
this.observer.observe(this);
}
disconnectedCallback() {
// Beim Entfernen aus dem DOM keine Beobachtung mehr aufrechterhalten
this.observer?.disconnect();
this.observer = null;
}
}
customElements.define('auto-size-card', AutoSizeCard);Cleanup in einem React-Hook
import { useEffect, useRef, useState } from 'react';
export const useElementSize = () => {
const ref = useRef(null);
const [size, setSize] = useState({ width: 0, height: 0 });
useEffect(() => {
if (!ref.current) return;
const observer = new ResizeObserver(([entry]) => {
const { width, height } = entry.contentRect;
setSize({ width, height });
});
observer.observe(ref.current);
return () => observer.disconnect(); // Cleanup beim Unmount
}, []);
return [ref, size];
};Mehrere Ziele auf einmal freigeben
const panels = document.querySelectorAll('.panel');
const observer = new ResizeObserver((entries) => {
entries.forEach((e) => console.log(e.target.id, e.contentRect.width));
});
panels.forEach((p) => observer.observe(p));
// Später, z. B. beim Schließen der Ansicht:
document.querySelector('#schliessen').addEventListener('click', () => {
observer.disconnect(); // beendet die Beobachtung aller .panel-Elemente
// Später wiederverwendbar:
// observer.observe(panels[0]);
});// Wichtig · Fallstricke
- Alles oder nichts:
disconnect()entfernt alle Ziele. Für ein einzelnes Element nehmen Sieunobserve(element). - Sie können
disconnect()gefahrlos mehrfach oder ohne beobachtete Ziele aufrufen. Es wird kein Fehler ausgelöst. - Wird
disconnect()innerhalb des Callbacks aufgerufen, läuft der aktuelle Durchlauf überentriestrotzdem vollständig weiter. Danach kommen keine neuen Benachrichtigungen mehr. - Die Instanz bleibt nach dem Aufruf nutzbar und kann mit
observe()wieder aktiviert werden. Sie brauchen also keinen neuen Observer. - Speicherlecks: Ohne
disconnect()(oderunobserve()) hält der Observer Referenzen auf seine Ziele fest. Gerade in Single-Page-Apps sollten Sie beim Unmount deshalb immer aufräumen. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome 64+, Firefox 69+, Safari 13.1+, Edge 79+). Im Internet Explorer gibt es das nicht, dort brauchen Sie ein Polyfill.