Bagaimanakah Saya Boleh Menanti Kewujudan Elemen dengan Cekap dalam JavaScript?

Tunggu Kewujudan Elemen dengan MutationObserver

Seperti yang anda temui dalam pembangunan sambungan Chrome anda, adalah penting untuk mengetahui apabila elemen tersedia pada halaman tersebut. Walaupun menggunakan selang waktu untuk menyemak penampilannya adalah pendekatan biasa, ia boleh menjadi tidak cekap. Nasib baik, jQuery tidak menyediakan penyelesaian yang mudah.

Alternatif moden dan berkesan ialah menggunakan API MutationObserver. Ini membolehkan anda mencipta fungsi JavaScript yang mendengar perubahan dalam pepohon DOM:

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

Fungsi ini mengambil pemilih sebagai input dan mengembalikan Janji yang diselesaikan apabila elemen ditemui.

Untuk menggunakannya, anda boleh menulis:

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

Atau, dengan async/menunggu:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menanti Kewujudan Elemen dengan Cekap dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!