Bagaimanakah Saya Boleh Menjeda Pelaksanaan JavaScript Sehingga Elemen DOM Tertentu Muncul?

Bagaimana untuk Menjeda Kod Anda Sehingga Elemen Muncul?

Dalam pembangunan web, selalunya perlu melakukan tindakan hanya apabila elemen tertentu wujud pada halaman tersebut. Ini menimbulkan persoalan tentang cara menentukan kehadiran elemen, terutamanya dalam persekitaran tak segerak seperti JavaScript.

Penyelesaian: Memanfaatkan API MutationObserver

API MutationObserver menyediakan yang mantap penyelesaian untuk mengesan perubahan dalam DOM. Dengan mencipta tika pemerhati dan memberikannya kepada elemen yang diingini atau induknya, anda boleh menyediakan panggilan balik yang akan dicetuskan apabila mutasi (penambahan, penyingkiran atau perubahan atribut) berlaku dalam kawasan yang diperhatikan.

Pelaksanaan

Coretan kod yang disediakan menunjukkan cara mencipta fungsi waitForElm boleh guna semula menggunakan 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
        });
    });
}

Penggunaan

Untuk menunggu elemen dengan kelas 'sesetengah kelas' muncul, anda boleh menggunakan:

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

Sebagai alternatif, dengan async/menunggu:

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

Pendekatan ini menawarkan beberapa kelebihan, termasuk:

• Tidak Menyekat: Ia menggunakan API MutationObserver, yang memantau perubahan secara pasif tanpa menyekat urutan utama.
• Tiada Ketergantungan: Ia hanya bergantung pada API asli, mengelakkan keperluan untuk pihak ketiga perpustakaan.
• Berasaskan Janji: Ia mengembalikan janji, membolehkan anda mengendalikan penampilan elemen dengan mudah dengan .then() atau async/await.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjeda Pelaksanaan JavaScript Sehingga Elemen DOM Tertentu Muncul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!