特定の DOM 要素が表示されるまで JavaScript の実行を一時停止するにはどうすればよいですか?

要素が表示されるまでコードを一時停止する方法

Web 開発では、多くの場合、特定の要素が存在する場合にのみアクションを実行する必要があります。ページ。これにより、特に JavaScript などの非同期環境で、要素の存在をどのように判断するかという問題が生じます。

解決策: MutationObserver API の活用

MutationObserver API は、堅牢な機能を提供します。 DOM 内の変更を検出するためのソリューション。オブザーバー インスタンスを作成し、それを目的の要素またはその親に割り当てることで、監視領域内で突然変異 (追加、削除、または属性の変更) が発生したときにトリガーされるコールバックを設定できます。

実装

提供されたコード スニペットは、次を使用して再利用可能な waitForElm 関数を作成する方法を示しています。 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
        });
    });
}

使用法

クラス 'some-class' を持つ要素が表示されるのを待つには、次を使用できます:

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

あるいは、 async/await:

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

このアプローチには、次のようないくつかの利点があります。

• ノンブロッキング: 変更を受動的に監視する MutationObserver API を使用します。メインスレッドをブロックせずに。
• いいえ依存関係: ネイティブ API のみに依存し、サードパーティ ライブラリの必要性を回避します。
• Promise-Based: Promise を返し、要素の外観を簡単に処理できるようにします。 .then() または async/await を使用します。

以上が特定の DOM 要素が表示されるまで JavaScript の実行を一時停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。