Wie kann ich die JavaScript-Ausführung anhalten, bis ein bestimmtes DOM-Element angezeigt wird?

Wie pausiere ich meinen Code, bis ein Element erscheint?

Bei der Webentwicklung ist es oft notwendig, Aktionen nur dann auszuführen, wenn bestimmte Elemente vorhanden sind die Seite. Dies wirft die Frage auf, wie das Vorhandensein eines Elements bestimmt werden kann, insbesondere in asynchronen Umgebungen wie JavaScript.

Lösung: Nutzung der MutationObserver-API

Die MutationObserver-API bietet eine robuste Lösung zur Erkennung von Änderungen im DOM. Indem Sie eine Beobachterinstanz erstellen und diese dem gewünschten Element oder seinem übergeordneten Element zuweisen, können Sie einen Rückruf einrichten, der ausgelöst wird, wenn eine Mutation (Hinzufügung, Entfernung oder Attributänderung) innerhalb des beobachteten Bereichs auftritt.

Implementierung

Das bereitgestellte Code-Snippet zeigt, wie man mit eine wiederverwendbare waitForElm-Funktion erstellt MutationObserver:

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
        });
    });
}

Verwendung

Um auf das Erscheinen eines Elements mit der Klasse „some-class“ zu warten, können Sie Folgendes verwenden:

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

Alternativ mit async/await:

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

Dieser Ansatz bietet mehrere Vorteile, einschließlich:

• Nicht blockierend: Es verwendet die MutationObserver-API, die Änderungen passiv überwacht, ohne den Hauptthread zu blockieren.
• Keine Abhängigkeit: Es basiert nur auf nativen APIs und vermeidet die Notwendigkeit von Drittanbietern Bibliotheken.
• Versprechensbasiert: Es gibt ein Versprechen zurück, sodass Sie das Erscheinungsbild des Elements bequem mit .then() oder async/await verwalten können.

Das obige ist der detaillierte Inhalt vonWie kann ich die JavaScript-Ausführung anhalten, bis ein bestimmtes DOM-Element angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!