Acara bar skrol JavaScript bukan masa nyata

Dalam pembangunan web, kami selalunya perlu menggunakan JavaScript untuk melaksanakan penatalan dinamik elemen pada halaman dan kami perlu mengawal acara menatal untuk mencapai pengalaman pengguna yang terbaik dan kesan interaktif. Walau bagaimanapun, dalam beberapa kes, kami mungkin menghadapi masalah seperti itu: acara bar skrol bukan masa nyata atau respons tidak tepat pada masanya. Masalah seperti ini sering menyebabkan kesan penatalan halaman menjadi tidak lancar dan menjejaskan pengalaman pengguna. Artikel ini akan membincangkan kedua-dua prinsip teknikal dan penyelesaian.

1 Prinsip teknikal

Memahami sebab acara bar skrol bukan masa nyata memerlukan pemahaman tertentu tentang mekanisme pengikatan acara dalam JavaScript. Mekanisme acara dalam JavaScript dilaksanakan berdasarkan model acara penyemak imbas Pengikatan acara mengaitkan fungsi dengan acara tertentu. Apabila acara ini berlaku, fungsi yang dikaitkan dengannya akan dipanggil. Untuk acara bar skrol, acara skrol objek tetingkap biasanya digunakan Acara ini dicetuskan apabila halaman ditatal. Jika acara bar skrol tidak bertindak balas dalam masa, ini bermakna penyemak imbas tidak dapat mencetuskan acara skrol dalam masa Ini biasanya berlaku dalam dua situasi berikut:

1. Masa pelaksanaan fungsi ialah. terlalu lama

Apabila fungsi yang kita ikat dalam acara tatal mengambil masa terlalu lama untuk dilaksanakan, penyemak imbas mungkin tidak dapat bertindak balas kepada acara bar tatal tepat pada masanya. Sebagai contoh, apabila kita menatal halaman, jika terdapat pengiraan kompleks atau operasi DOM pada masa yang sama, ia akan menyebabkan acara bar skrol tidak bertindak balas dalam masa.

2. Terlalu banyak elemen pada halaman

Apabila terdapat sejumlah besar elemen pada halaman, acara bar skrol juga tidak akan bertindak balas dalam masa. Oleh kerana penyemak imbas perlu membuat dan melukis semula setiap elemen semasa menatal, jika terdapat terlalu banyak elemen, kelajuan tindak balas akan menjadi lebih perlahan.

2. Penyelesaian

Memandangkan masalah di atas, kami boleh menggunakan dua penyelesaian berikut untuk menyelesaikan masalah acara bar skrol bukan masa nyata.

1. Pengoptimuman pelaksanaan fungsi

Mengoptimumkan pelaksanaan fungsi dalam acara skrol ialah cara penting untuk menyelesaikan masalah tindak balas perlahan terhadap acara bar skrol. Kita boleh mengoptimumkan dengan cara berikut:

(1) Cache elemen DOM

Apabila fungsi dilaksanakan, jika kita perlu mengendalikan elemen DOM, kita boleh cache elemen yang perlu dikendalikan, supaya Ia boleh mengurangkan bilangan pertanyaan DOM dan meningkatkan kelajuan pelaksanaan fungsi.

(2) Pendikitan fungsi

Pendikitan fungsi merujuk kepada kaedah mengawal kekerapan panggilan fungsi dengan melambatkan pelaksanaan fungsi. Kita boleh menggunakan fungsi pendikit untuk mengehadkan kekerapan mencetuskan acara tatal dan mengurangkan bilangan pelaksanaan fungsi. Sebagai contoh, berikut ialah kod pelaksanaan pendikitan fungsi mudah:

function throttle(fn, delay) {
    let timer = null;
    return function() {
        let context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
}

Dalam fungsi di atas, kami menetapkan pemasa untuk menangguhkan pelaksanaan fungsi, dengan itu mengawal kekerapan panggilan fungsi.

(3) Fungsi anti goncang

Fungsi anti goncang bermaksud menangguhkan pelaksanaan fungsi untuk tempoh masa selepas peristiwa dicetuskan lagi semasa ini tempoh, masa akan dimulakan semula. Kita boleh mengehadkan masa tindak balas acara tatal melalui fungsi anti-goncang. Sebagai contoh, berikut ialah kod pelaksanaan anti-goncang fungsi mudah:

function debounce(fn, delay) {
    let timer = null;
    return function() {
        let context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
}

Dalam fungsi di atas, kami juga menetapkan pemasa untuk menangguhkan pelaksanaan fungsi, tetapi jika peristiwa yang sama dicetuskan semasa kelewatan tempoh, kemudian Masa Semula, supaya masa tindak balas acara tatal boleh dihadkan.

2. Kurangkan elemen halaman

Apabila terdapat terlalu banyak elemen halaman, kami juga boleh menyelesaikan masalah tindak balas perlahan terhadap acara bar skrol dengan mengurangkan elemen halaman. Kaedah khusus adalah seperti berikut:

(1) Pembersihan elemen DOM

Apabila halaman sedang menatal, kita boleh mengosongkan beberapa elemen DOM yang tidak perlu dengan mendengar acara tatal, dengan itu mengurangkan jumlah masa pelayar perlu memaparkan Bilangan elemen.

(2) Pemuatan paging

Dalam sesetengah halaman yang perlu memaparkan sejumlah besar data, kami boleh menggunakan pemuatan paging untuk memuatkan data ke dalam halaman secara berkelompok untuk mengelakkan pemuatan jumlah yang besar data pada satu masa Mengakibatkan kemerosotan prestasi.

Ringkasan

Dalam pembangunan web, kelajuan tindak balas acara bar skrol adalah penting untuk pengalaman interaktif halaman. Dengan mengoptimumkan pelaksanaan fungsi dalam acara tatal dan mengurangkan elemen halaman, kami boleh menyelesaikan masalah bar tatal bukan masa nyata dengan berkesan dan meningkatkan prestasi halaman dan pengalaman pengguna.

Atas ialah kandungan terperinci Acara bar skrol JavaScript bukan masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!