Petua Pantas: Cara Tatal Tatal Tatal

mata utama

Mendengarkan peristiwa tatal boleh menyebabkan kemerosotan prestasi kerana penyemak imbas melaksanakan fungsi panggil balik setiap kali tatal pengguna; Throttle memastikan aliran peristiwa yang berterusan sepanjang selang masa tertentu, sementara de-bumping menggabungkan satu siri peristiwa ke dalam satu peristiwa.
Melaksanakan acara throttling di JavaScript boleh menjadi rumit, dan disyorkan untuk menggunakan pelaksanaan pihak ketiga seperti Lodash, yang merupakan standard untuk throttling acara. Fungsi Throttling Lodash memudahkan throttling acara rolling dan menyediakan pilihan untuk menentukan sama ada fungsi panggil balik dilaksanakan di bahagian depan dan/atau belakang acara.
Kunci untuk memilih pendikit dan debounce adalah melihat sifat masalah yang akan diselesaikan. Throttle terpakai kepada peristiwa -peristiwa yang berlaku dalam tempoh masa tertentu, seperti menatal, sementara Debounce terpakai kepada peristiwa -peristiwa seperti penekan utama, di mana selang antara peristiwa tidak penting.

Artikel ini dikaji semula oleh Vildan Softic dan Julian Motz. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk mendapatkan kandungan SitePoint untuk yang terbaik!

Salah satu bahaya mendengar peristiwa tatal adalah kemerosotan prestasi. Pelayar melaksanakan fungsi panggil balik setiap kali skrol pengguna, yang boleh mempunyai banyak peristiwa sesaat. Jika fungsi panggil balik melakukan banyak operasi REDRAW, ini bermakna berita buruk untuk pengguna akhir. Redrawing adalah mahal, terutamanya apabila menyusun semula kebanyakan pandangan, seperti ketika kejadian tatal berlaku.

Contoh berikut menggambarkan masalah ini:

Lihat Contoh pada Codepen: Unthrottling Scrolling Events

Selain kemerosotan prestasi dan terdedah kepada sawan. Contoh ini menggambarkan apa yang berlaku apabila komputer mengikuti arahan anda. Tiada peralihan yang lancar antara warna latar belakang, skrin hanya berkelip. Mana -mana pengaturcara malang mungkin merasakan bahawa tidak ada harapan di dunia ini. Adakah tidak ada cara yang lebih baik?

peristiwa standard

Satu penyelesaian adalah untuk menangguhkan peristiwa dan menguruskan pelbagai acara sekaligus. Terdapat dua fungsi yang biasa digunakan yang dapat membantu kita melakukan ini: pendikit dan debounce.

amanah memastikan aliran peristiwa yang berterusan sepanjang selang waktu tertentu, sementara de-bumping menggabungkan satu siri peristiwa ke dalam satu peristiwa. Salah satu cara berfikir ialah pendikit adalah berdasarkan masa, manakala debounce adalah berdasarkan peristiwa. Throttle dijamin akan dilaksanakan, sementara de-jitter tidak dijamin akan dilaksanakan selepas paket berlaku. Sekiranya anda ingin mengetahui lebih lanjut mengenai ini, sila lihat perbincangan mendalam ini mengenai de-bumping dan pendikit.

de-shaking

Debounce menyelesaikan masalah yang berbeza, seperti butang dengan Ajax. Mengapa Menghantar Permintaan untuk Setiap Keypress Apabila anda menaip sesuatu dalam bentuk? Penyelesaian yang lebih elegan adalah untuk menggabungkan satu siri kunci ke dalam satu peristiwa yang akan mencetuskan permintaan AJAX. Ini mematuhi proses semula jadi menaip dan menjimatkan sumber pelayan. Untuk penekan utama, selang antara peristiwa tidak penting kerana pengguna tidak menaip pada kadar yang tetap.

Trust

kerana tidak ada jaminan debounce, kaedah lain adalah untuk mendekati acara rolling. Menatal berlaku dalam jangka masa tertentu, jadi sesuai untuk pendikit. Setelah pengguna mula menatal, kami ingin memastikan pelaksanaan tepat pada masanya.

Teknik ini membantu memeriksa sama ada kami berada di bahagian tertentu halaman. Memandangkan saiz halaman, ia mengambil masa beberapa saat untuk menatal melalui kandungan. Ini membolehkan pendikit untuk mencetuskan peristiwa hanya sekali dalam selang tertentu. Throttling acara akan menjadikan pengalaman menatal lebih lancar dan memastikan pelaksanaan.

Berikut adalah pendikit peristiwa mudah yang ditulis dalam JavaScript asli:

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

Pelaksanaan ini menetapkan pembolehubah masa yang menjejaki masa ketika fungsi pertama dipanggil. Setiap kali fungsi yang dikembalikan dipanggil, ia memeriksa jika selang menunggu telah berlalu, dan jika ya, ia mencetuskan panggilan balik dan menetapkan semula masa.

Lihat Contoh pada Codepen: Pelaksanaan Native JS throttling

Perpustakaan Pengguna

Terdapat banyak bahaya dalam acara pendikit, dan tidak disyorkan untuk menulis sendiri. Daripada menulis pelaksanaan anda sendiri, saya cadangkan menggunakan pelaksanaan pihak ketiga.

lodash

Lodash adalah standard de facto untuk throttling acara di JavaScript. Perpustakaan ini adalah sumber terbuka supaya anda boleh melayari kod yang anda suka. Manfaatnya adalah bahawa perpustakaan adalah modular, jadi anda boleh mendapatkan apa yang anda inginkan daripadanya.

Menggunakan fungsi pendikit Lodash, throttling acara rolling menjadi mudah:

window.addEventListener('scroll', _.throttle(callback, 1000));

Ini mengehadkan torrent acara rolling masuk ke sekali setiap 1000 milisaat (satu saat).

API

menyediakan pilihan depan dan belakang seperti berikut:

_.throttle(callback, 1, { trailing: true, leading: true });

Pilihan ini menentukan sama ada fungsi panggil balik dilaksanakan di bahagian depan dan/atau pinggir belakang acara.

Satu masalah di sini ialah jika anda menetapkan kedua -dua bahagian depan dan kelebihan belakang ke palsu, fungsi panggil balik tidak akan terbakar. Menetapkan kelebihan depan ke True akan segera memulakan pelaksanaan panggilan balik dan kemudian pendikit. Ini memastikan pelaksanaan untuk setiap selang apabila anda menetapkan kedua -dua tepi depan dan trailing menjadi benar.

Lihat demo pada codepen: acara rolling throttle

Dari melihat kod sumber, saya mendapati menarik bahawa Throttle () hanya pembungkus untuk debounce (). Throttle hanya lulus satu set parameter yang berbeza untuk mengubah tingkah laku yang dikehendaki. Throttle menetapkan maxwait, yang akan menjamin pelaksanaan sebaik sahaja anda menunggu lama ini. Selebihnya pelaksanaan tetap sama.

Saya harap anda dapat mencari lodash yang baik untuk anda dalam acara seterusnya!

Kesimpulan

Kunci untuk pendikit dan debounce adalah untuk memeriksa sifat masalah yang akan diselesaikan. Kedua -dua teknologi ini sesuai untuk kes penggunaan yang berbeza. Saya cadangkan melihat soalan dari perspektif pengguna untuk mencari jawapannya.

Kelebihan menggunakan Lodash adalah bahawa ia abstrak banyak kerumitan dalam API yang mudah. Berita baiknya ialah anda boleh menggunakan _.throttle() dalam projek anda tanpa menambah seluruh perpustakaan. Terdapat Lodash-CLI, alat yang membolehkan anda membuat hanya membina tersuai yang mengandungi fungsi yang diperlukan. Throttling acara hanyalah sebahagian kecil daripada seluruh perpustakaan.

Soalan Lazim Mengenai Peristiwa Rolling Throttling (Soalan Lazim)

• Apakah tujuan acara rolling dalam JavaScript?

Acara Percaya Percaya di JavaScript adalah teknologi yang digunakan untuk mengoptimumkan prestasi laman web atau aplikasi web. Apabila pengguna menatal pada laman web, penyemak imbas menghasilkan acara tatal untuk pergerakan setiap piksel. Ini boleh menyebabkan beratus -ratus atau bahkan beribu -ribu peristiwa yang dihasilkan sesaat, yang boleh merendahkan prestasi laman web. Dengan membuang peristiwa -peristiwa ini, kita dapat mengehadkan bilangan peristiwa yang akan diproses, dengan itu meningkatkan prestasi laman web dan respons.

• Bagaimanakah kerja pendikit di JavaScript?

Percayalah dalam JavaScript berfungsi dengan menetapkan kelewatan antara pelaksanaan acara. Apabila peristiwa dicetuskan, pemasa bermula. Sekiranya acara lain dicetuskan sebelum pemasa berakhir, acara itu diabaikan. Ini memastikan bahawa masa tertentu mesti berlalu sebelum acara lain diproses. Teknik ini amat berguna untuk peristiwa yang sering dicetuskan seperti peristiwa menatal.

• Apakah perbezaan antara pendikit dan gegaran?

Percaya dan debounce adalah teknik yang digunakan untuk mengehadkan bilangan kali fungsi boleh dilaksanakan dari masa ke masa. Perbezaan utama antara keduanya adalah bagaimana mereka mengendalikan latensi. Throttle memastikan bahawa fungsi itu tidak dipanggil lebih daripada sekali setiap x milisaat, sementara debounce memastikan bahawa fungsi itu tidak dipanggil sehingga x milisaat telah berlalu sejak panggilan terakhir. Dalam erti kata lain, Throttling melaksanakan fungsi pada selang masa yang tetap, sementara Debounce melaksanakan fungsi selepas tempoh tidak aktif.

• Bagaimana saya mencapai pendikit di JavaScript?

fungsi setTimeout boleh digunakan untuk pendikit dalam JavaScript. Fungsi ini membolehkan anda melambatkan pelaksanaan fungsi dengan bilangan milisaat tertentu. Dengan menggunakan setTimeout dengan pendengar acara, anda dapat memastikan bahawa fungsi pengendali acara tidak dipanggil lebih dari sekali setiap milisaat x.

• Bolehkah saya menggunakan pendikit dengan peristiwa lain selain acara menatal?

Ya, pendikit boleh digunakan dengan apa -apa jenis acara dalam JavaScript, bukan hanya menatal acara. Ia amat berguna untuk peristiwa yang sering mencetuskan atau memerlukan pemprosesan yang luas, seperti peristiwa pergerakan tetikus, saiz semula peristiwa, dan peristiwa akhbar utama.

• Adakah terdapat perpustakaan atau rangka kerja yang menyediakan sokongan terbina dalam untuk pendikit?

Ya, terdapat beberapa perpustakaan dan kerangka yang memberikan sokongan terbina dalam untuk pendikit. Sebagai contoh, Lodash Perpustakaan Utiliti JavaScript yang popular menyediakan fungsi pendikit yang memudahkan untuk melaksanakan pendikit. Begitu juga, jquery perpustakaan JavaScript yang popular juga menyediakan fungsi pendikit dalam APInya.

• Apakah kelemahan potensi pendikit?

Walaupun throttling dapat meningkatkan prestasi laman web, ia juga boleh membawa kepada respons pengalaman pengguna yang perlahan jika digunakan secara tidak wajar. Sebagai contoh, jika kelewatan ditetapkan terlalu tinggi, pengguna mungkin melihat lag antara operasi mereka dan tindak balas laman web. Oleh itu, adalah penting untuk mencari keseimbangan antara prestasi dan kelajuan tindak balas apabila menggunakan pendikit.

• Bagaimana saya menguji keberkesanan pendikit?

anda boleh menguji keberkesanan pendikit dengan mengukur prestasi laman web sebelum dan selepas pendikit. Ini boleh dilakukan menggunakan alat pemaju penyemak imbas, yang memberikan maklumat terperinci mengenai prestasi laman web, termasuk masa yang diperlukan untuk memproses acara.

• Bolehkah pendikit digunakan dalam kombinasi dengan teknik pengoptimuman prestasi lain?

Ya, pendikit boleh digunakan dalam kombinasi dengan teknik pengoptimuman prestasi lain seperti debounce dan requestAnimationFrame. Dengan menggabungkan teknologi ini, anda dapat meningkatkan prestasi dan responsif laman web anda.

• Adakah terdapat alternatif untuk pendikit?

Ya, terdapat beberapa alternatif untuk mendikitkan, termasuk debounce dan requestAnimationFrame. Debounce adalah sama dengan pendikit, tetapi bukannya mengehadkan bilangan kali fungsi boleh dipanggil dari masa ke masa, ia memastikan bahawa fungsi itu tidak akan dipanggil sehingga masa tertentu telah berlalu sejak panggilan terakhir. requestAnimationFrame adalah kaedah yang memberitahu penyemak imbas untuk melaksanakan animasi dan meminta penyemak imbas untuk memanggil fungsi yang ditentukan untuk mengemas kini animasi sebelum mengecat semula seterusnya.

Atas ialah kandungan terperinci Petua Pantas: Cara Tatal Tatal Tatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!