Comment puis-je suspendre l'exécution de JavaScript jusqu'à ce qu'un élément DOM spécifique apparaisse ?

Comment suspendre votre code jusqu'à ce qu'un élément apparaisse ?

Dans le développement Web, il est souvent nécessaire d'effectuer des actions uniquement lorsque des éléments spécifiques existent sur la page. Cela pose la question de savoir comment déterminer la présence d'un élément, notamment dans les environnements asynchrones comme JavaScript.

Solution : exploiter l'API MutationObserver

L'API MutationObserver fournit un outil robuste solution pour détecter les changements dans le DOM. En créant une instance d'observateur et en l'attribuant à l'élément souhaité ou à son parent, vous pouvez configurer un rappel qui sera déclenché lorsqu'une mutation (ajout, suppression ou changement d'attribut) se produit dans la zone observée.

Implémentation

L'extrait de code fourni montre comment créer une fonction waitForElm réutilisable à l'aide 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
        });
    });
}

Utilisation

Pour attendre qu'un élément avec la classe 'some-class' apparaisse, vous pouvez utiliser :

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

Alternativement, avec async/await :

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

Cette approche offre plusieurs avantages, notamment :

• Non bloquant : Il utilise l'API MutationObserver, qui surveille passivement les modifications sans bloquer le thread principal.
• Aucune dépendance : Il s'appuie uniquement sur des API natives, évitant ainsi le besoin de tiers bibliothèques.
• Basé sur une promesse : Il renvoie une promesse, vous permettant de gérer facilement l'apparence de l'élément avec .then() ou async/await.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!