Jangan Lupakan Debounce dan Throttle Lagi. Visualisasikan mereka - Codepen disertakan

Ini bukan sekadar artikel lain yang cuba menerangkan cara Debounce atau Throttling berfungsi pada tahap kod malah ini adalah ilustrasi untuk mengingati dan menggambarkan konsep supaya anda boleh mengaplikasikannya secara praktikal di tempat kerja anda.

Secara peribadi, saya sering mendapati diri saya terlupa konsep nyahlantun dan pendikit, jadi apabila seseorang meminta saya menerangkannya—atau jika soalan timbul dalam temu bual—saya hanya berkelip ?. Untuk mengelakkan itu, saya membuat halaman mudah untuk membantu menyegarkan ingatan saya. Kalau tak nak rasa macam penipu ikut je ?.

Dalam pen kod di bawah saya telah menetapkan kelewatan kepada 2 saat untuk nyahlantun dan pendikit. Cuba klik pada item makanan rawak dan beri jeda.

Indeks

• Analogi Restoran
• Penjelasan
  • Kenapa Debounce atau Throttle pula ?
  • Pengendali Acara JS
  • Ada apa?
  • Debounce
  • Pendikit

Pautan ke halaman

ashiqsultan.github.io

Pautan GitHub

Analogi Restoran

Bayangkan anda berada di sebuah restoran dan ingin memesan makanan, jadi anda memilih menu dari meja dan anda mula membaca semua item. (Dalam halaman web yang saya kongsi, mengklik item makanan yang berbeza akan sama dengan membaca item menu)

Analoginya di sini

• ? Bahan makanan membaca = ? Klik Butang
• ?? Pelayan ke dapur = ? Panggilan API

Dan bayangkan terdapat tiga jenis pelayan di restoran yang boleh melayani anda:

1. ?‍♂️ Pelayan Biasa

   • Mengambil perhatian setiap kali anda menyebut item
   • Berlari ke dapur untuk setiap item individu
   • Seperti JS mengendalikan setiap acara dengan segera

2. ? Pelayan yang telah melantun

   • Apabila anda mula membaca menu, dia akan menunggu anda berhenti seketika selama sekurang-kurangnya 2 saat sebelum mengambil pesanan.
   • Seperti menunggu pengguna selesai menaip sebelum membuat panggilan API

3. ?? Pelayan Tercegat

   • Mengambil pesanan hanya sekali setiap 2 saat
   • Jika anda menyebut berbilang item dalam masa 2 saat itu, semuanya akan pergi dalam susunan yang sama
   • Seperti mengehadkan panggilan API kepada sekali setiap X saat, tanpa mengira aktiviti pengguna

Nota: Perbezaan utama ialah:

• Menyahlantun: Menunggu aktiviti (klik butang) BERHENTI untuk masa tertentu untuk mencetuskan
• Pendikit: Pencetusan pada selang waktu BIASA, tidak kira apabila sesuatu aktiviti dihentikan
• Juga 2 saat hanyalah sesuatu yang saya gunakan sebagai contoh, ia boleh pada bila-bila masa

Penjelasan

Mengapa Debounce atau Throttle pula?

Sebelum memahami debounce atau throttle, kita perlu tahu mengapa ia digunakan pada mulanya. Untuk mengetahuinya, mari fahami gelagat pengendali acara JS

Pengendali Acara di JS

Dalam JS, pengendali acara hanyalah fungsi yang dilaksanakan apabila acara tertentu (seperti klik, menaip atau menatal) berlaku. Secara lalai, pengendali ini akan menyala setiap kali peristiwa berlaku - setiap ketukan kekunci, setiap klik atau pergerakan tatal.

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

apa salahnya

Katakan sebagai contoh anda mempunyai butang yang akan membuat panggilan API

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

Fungsi di atas akan melaksanakan makeApiCall() pada setiap klik butang (i.e) jika anda berjaya menekannya 10 kali dalam masa 1 saat, teka apa yang anda telah buat 10 panggilan api dalam 1 saat. Ini ialah kelakuan lalai.

Tetapi melancarkan panggilan API setiap kali untuk acara boleh menjadi tidak cekap dan selalunya ini bukan yang anda cari. Di sinilah pendikitan dan nyahlantun masuk ke dalam gambar.

Jika anda ingin mengambil definisi dari artikel ini mungkin ini adalah satu. Pendikit dan nyahlantun ialah dua cara paling biasa untuk mengawal kadar tindak balas Pendengar Acara.

Debouncing

Saya tidak akan menerangkan kod untuk nyahlantun kerana ini hanya boleh diimport dari lodash, sebaliknya kami akan melihat di mana anda sebenarnya boleh menggunakannya.

Gunakan Debouncing apabila anda ingin membuat panggilan api hanya jika pengguna telah berhenti menaip untuk tempoh masa tertentu atau berhenti mengklik untuk tempoh masa tertentu.

Dalam contoh kami jika pengguna terus mengklik butang walaupun selama 5 minit terus, panggilan api akan dibuat sekali sahaja.

Jadi dua perkara berlaku di sini:

• Pengguna perlu berhenti mengklik.
• Berhenti mengklik bermakna sekurang-kurangnya selama 2 saat tiada klik pada butang itu.

Pendikit

Pendikit adalah seperti selang waktu. Gunakan ini apabila anda tidak mahu menunggu sehingga pengguna berhenti sebaliknya membuat panggilan api pada setiap selang sebut 2 saat

Contoh jika pengguna menaip selama 1 minit terus tanpa menjeda maka untuk setiap 2 saat anda akan memanggil API.

Kesimpulan

Seperti yang dinyatakan dalam artikel, ini bukan untuk menerangkan cara fungsi berfungsi sebaliknya untuk menggambarkan dan memahami mengapa ia digunakan. Saya pasti akan mengesyorkan anda untuk memahami pada tahap kod cara ia berfungsi tetapi secara peribadi masih akan menggunakan nyahlantun dan pendikit yang disediakan oleh perpustakaan lodash dan bukan untuk mencipta semula roda.

Jika anda suka artikel itu tinggalkan tanda ibu jari, ia benar-benar akan mendorong saya untuk menulis lebih banyak lagi. Terima kasih?.

Atas ialah kandungan terperinci Jangan Lupakan Debounce dan Throttle Lagi. Visualisasikan mereka - Codepen disertakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!