Throttling & Debouncing dalam JavaScript: Panduan Pemula

Apabila menggunakan JavaScript, pencetus peristiwa yang berlebihan boleh melambatkan aplikasi anda. Sebagai contoh, pengguna mengubah saiz tetingkap penyemak imbas atau menaip dalam bar carian boleh menyebabkan peristiwa dicetuskan berulang kali dalam masa yang singkat, menjejaskan prestasi apl.

Di sinilah pendikitan dan nyahlantun datang untuk menyelamatkan. Ia membantu anda mengurus kekerapan fungsi anda dipanggil apabila berurusan dengan acara yang terlalu kerap berlaku.

? Apa itu Throttling?

Pendikit mengehadkan kekerapan sesuatu fungsi boleh dilaksanakan. Walaupun peristiwa berlaku berulang kali, fungsi pendikit hanya akan berjalan paling banyak sekali setiap selang masa yang ditentukan.

Contoh:

Bayangkan anda berada di konsert, dan anda sedang mengambil gambar. Tetapi anda memutuskan untuk mengambil satu gambar sahaja setiap 5 minit (tidak kira betapa menariknya persembahan itu). Itu seperti pendikit. Tidak kira berapa banyak detik foto yang layak berlaku, anda akan mematuhi peraturan anda tentang satu foto setiap 5 minit.

Dalam JavaScript, ini boleh digunakan apabila anda ingin menjejaki kekerapan pengguna menatal ke bawah halaman, tetapi anda tidak mahu fungsi itu dicetuskan setiap milisaat. Dengan pendikitan, anda mengawal kekerapan fungsi itu dilaksanakan.

Contoh Kod:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

Dalam contoh ini, fungsi handleScroll hanya akan berjalan sekali setiap 2 saat (2000 milisaat) tidak kira berapa cepat atau kerap pengguna menatal.

? Apa itu Debouncing?

Menyahlantun memastikan fungsi hanya dipanggil selepas tempoh tertentu tidak aktif. Jika acara terus menyala, fungsi akan terus menetapkan semula pemasa dan hanya mencetuskan selepas acara berhenti.

Contoh:

Bayangkan anda berada dalam sembang kumpulan dan anda sedang menaip mesej. Anda tidak mahu menghantar pemberitahuan kepada rakan anda setiap kali anda menekan kekunci. Sebaliknya, anda mahu menunggu sehingga anda berhenti menaip selama beberapa saat sebelum menghantar pemberitahuan "menaip...". Itu menyahlantun — hanya menghantar pemberitahuan selepas jeda dalam menaip.

Dalam JavaScript, nyahlantun sering digunakan apabila pengguna menaip ke dalam kotak carian. Daripada menghantar pertanyaan carian selepas setiap ketukan kekunci, anda boleh menunggu sehingga pengguna berhenti menaip seketika sebelum melakukan carian.

Contoh Kod:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

Dalam contoh ini, fungsi handleInput hanya akan dijalankan selepas pengguna berhenti menaip selama 500 milisaat.

? Bila Perlu Menggunakan Pendikit atau Nyahlantun?

⚡️ Gunakan Pendikit apabila anda ingin mengawal kekerapan sesuatu fungsi dipanggil dari semasa ke semasa. Sesuai untuk acara seperti:

=> Menatal
=> Saiz semula tetingkap
=> Pergerakan tetikus

⚡️ Gunakan Debouncing apabila anda ingin memastikan bahawa fungsi hanya dipanggil selepas acara selesai menembak. Sesuai untuk acara seperti:

=> Menaip dalam bar carian
=> Penyerahan borang
=> Saiz semula tetingkap (untuk tindakan seperti pelarasan reka letak)

Kesimpulan ✅

Pendikit dan nyahlantun ialah teknik hebat untuk meningkatkan prestasi dan responsif aplikasi JavaScript anda.

Ia membantu anda mengurus kekerapan fungsi dilaksanakan, menghalang apl anda daripada ditimpa terlalu banyak acara.

Dengan memahami masa dan cara menggunakannya, anda boleh memastikan kod anda berjalan lancar walaupun dalam apl yang paling sibuk!

Selamat Pengekodan! ?

Atas ialah kandungan terperinci Throttling & Debouncing dalam JavaScript: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!