Bagaimanakah Saya Boleh Tunggu Elemen Wujud dalam JavaScript dengan Cekap?

Menunggu Kewujudan Elemen

Pembangunan web selalunya melibatkan halaman web yang dikemas kini secara dinamik di mana elemen muncul atau hilang. Oleh itu, menjadi penting untuk menentukan apabila elemen tertentu tersedia. Dalam artikel ini, kami akan meneroka penyelesaian yang teguh menggunakan API MutationObserver untuk menunggu sehingga unsur wujud.

MutationObserver: A Native Solution

API MutationObserver menyediakan cara serba boleh untuk memantau perubahan DOM. Ia membolehkan kami mencipta pemerhati yang memantau elemen tertentu atau keseluruhan dokumen dan memberitahu kami apabila terdapat perubahan yang sepadan dengan kriteria kami.

Melaksanakan Penyelesaian

Yang berikut coretan kod mempamerkan pelaksanaan waitForElm fungsi:

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 menggunakan fungsi waitForElm, cuma masukkan pemilih elemen yang dikehendaki. Janji dikembalikan, yang diselesaikan apabila elemen tersedia:

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

Kelebihan

Penyelesaian ini menawarkan beberapa kelebihan berbanding kaedah pengundian tradisional atau kaedah terbina dalam jQuery :

• Efisyen: Tidak perlu pengundian, penjimatan sumber sistem.
• Tepat: Dijamin akan mencetuskan apabila elemen itu benar-benar wujud.
• Native: Tiada perpustakaan pihak ketiga atau berat tanggungan.
• Sokongan async/wait: Penyepaduan lancar dengan pengaturcaraan tak segerak moden.

Dengan memanfaatkan MutationObserver API, anda boleh menunggu elemen wujud dalam aplikasi web anda dengan berkesan, memastikan tindakan yang boleh dipercayai dan tepat pada masanya.

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