Wie kann ich effizient auf die Existenz von Elementen in JavaScript warten?

Mit MutationObserver auf Elementexistenz warten

Wie Sie bei der Entwicklung Ihrer Chrome-Erweiterung festgestellt haben, ist es wichtig zu wissen, wann ein Element verfügbar wird die Seite. Die Verwendung von Intervallen zur Überprüfung des Erscheinungsbilds ist zwar ein gängiger Ansatz, kann jedoch ineffizient sein. Glücklicherweise bietet jQuery keine einfache Lösung.

Eine moderne und effektive Alternative ist die Verwendung der MutationObserver API. Dadurch können Sie eine JavaScript-Funktion erstellen, die auf Änderungen im DOM-Baum wartet:

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

Diese Funktion verwendet einen Selektor als Eingabe und gibt ein Promise zurück, das aufgelöst wird, wenn das Element gefunden wird.

Um es zu verwenden, können Sie schreiben:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

Oder mit async/await:

const elm = await waitForElm('.some-class');

Das obige ist der detaillierte Inhalt vonWie kann ich effizient auf die Existenz von Elementen in JavaScript warten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!