Membandingkan teknik debouncing dan pendikit dalam acara JavaScript

Perbezaan teras antara anti-shake (debounce) dan pendikit (pendikit) ialah kaedah kawalan kekerapan dilakukan secara berbeza. 1. Tunggu tempoh masa selepas acara itu dicetuskan. Jika ia tidak dicetuskan lagi dalam tempoh itu, ia akan dilaksanakan. Ia sesuai untuk senario di mana hanya peduli dengan operasi terakhir, seperti memasukkan cadangan dari kotak carian; 2. Throttling menjamin bahawa fungsi itu hanya dilaksanakan sekali dalam selang waktu yang ditetapkan, dan sesuai untuk senario di mana status perlu diperiksa secara teratur, seperti pemantauan tatal. Kedua -duanya boleh digunakan untuk situasi "pelaksanaan terakhir" dan "pelaksanaan masa" masing -masing. Apabila memilih, anda harus menilai berdasarkan keperluan khusus.

Apabila mengendalikan peristiwa JavaScript, debounce dan throttle adalah dua cara teknikal yang biasa digunakan. Mereka secara berkesan dapat mengawal kekerapan pencetus peristiwa frekuensi tinggi, tetapi senario yang berkenaan adalah berbeza. Jika anda ingin mengehadkan bilangan pelaksanaan operasi tertentu, seperti cadangan carian kotak input, pelarasan tetingkap, menatal mendengar, dan lain -lain, adalah penting untuk memahami perbezaan di antara mereka.

Apa itu Anti-Shake (Debounce)

Idea teras anti-goncang adalah: tunggu tempoh masa selepas peristiwa itu dicetuskan, dan jika ia tidak dicetuskan lagi dalam tempoh masa ini, fungsi itu akan benar-benar dilaksanakan . Ia sesuai untuk mengendalikan "hanya menjaga operasi terakhir".

Sebagai contoh, apabila pengguna memasuki watak -watak secara berterusan dalam kotak carian, kami tidak mahu memulakan permintaan setiap kali kami menekan kekunci, tetapi berharap untuk menunggu sehingga pengguna berhenti sebelum pertanyaan. Pada masa ini, anti-shake sangat sesuai.

Melaksanakan fungsi anti-goncang yang mudah:

 fungsi debounce (fn, kelewatan) {
  Biarkan pemasa;
  kembali (... args) => {
    ClearTimeout (pemasa);
    pemasa = setTimeout (() => fn.apply (ini, args), kelewatan);
  };
}

Cara Menggunakan:

 inputElement.AdDeventListener ('input', debounce (fetchResults, 300));

Catatan :

• Anti-shake akan ditangguhkan selepas pencetus terakhir.
• Jika immediate: true ditetapkan, ia boleh dilaksanakan sekali dan kemudian masukkan tempoh penyejukan.

Apa itu pendikit

Idea pendikit adalah untuk memastikan bahawa fungsi itu dilaksanakan hanya sekali dalam selang waktu tertentu . Tidak kira berapa kerap ia mencetuskan, ia akan dilaksanakan pada kadar tetap.

Ini sesuai untuk senario seperti kemas kini kedudukan bar tatal dan perubahan saiz tetingkap yang memerlukan pemeriksaan status biasa.

Pelaksanaan pendikit asas:

 fungsi pendikit (fn, had) {
  Biarkan lastcall = 0;
  kembali (... args) => {
    const now = date.now ();
    jika (sekarang - lastcall> = had) {
      fn.apply (ini, args);
      lastcall = sekarang;
    }
  };
}

Contoh Penggunaan:

 window.addeventListener ('tatal', throttle (checkscrollPosition, 1000));

Catatan :

• Fungsi kawalan pendikit berjalan hanya sekali dalam masa yang ditetapkan.
• Anda boleh memilih sama ada untuk melaksanakan pendahuluan sebaik sahaja pencetus pertama atau juga melakukan trailing sekali selepas pencetus terakhir.

Anti-Shake vs Throttling: Bagaimana memilih?

Anda boleh ingat ini:

• Anti-goncang = simpan perkataan anda untuk kali terakhir
• Pendikit = ucapan tepat pada masanya

Beberapa petua dalam pembangunan sebenar

• Menggunakan Lodash's _.debounce dan _.throttle adalah cara yang mudah, tetapi jangan lupa untuk melaksanakan prinsip itu sendiri.
• Apabila mengikat peristiwa dalam rangka kerja seperti React/Vue, ingatlah untuk membersihkan pemasa apabila komponen pemotongan untuk mengelakkan kebocoran ingatan.
• Ia boleh digunakan dalam kombinasi di bawah keperluan yang kompleks, seperti pertama kali menyentuh peristiwa rolling, dan kemudian memuatkan data anti-goncang.

Pada dasarnya itu sahaja. Kedua -dua teknologi tidak rumit, tetapi dalam aplikasi sebenar, mudah untuk menjejaskan prestasi atau kesilapan logik akibat penyalahgunaan.

Atas ialah kandungan terperinci Membandingkan teknik debouncing dan pendikit dalam acara JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!