Debouncing vs Throttling dalam JavaScript: Mengoptimumkan Fungsi Panggilan untuk Prestasi Lebih Baik

Memahami Debouncing dan Throttling dalam JavaScript

Menyahlantun dan pendikit ialah dua teknik penting yang digunakan dalam JavaScript untuk mengawal kadar di mana fungsi dilaksanakan. Teknik ini sering digunakan untuk mengoptimumkan prestasi, terutamanya dalam senario seperti mengendalikan input pengguna, acara menatal dan mengubah saiz acara. Kedua-duanya digunakan untuk mengehadkan kekerapan panggilan fungsi, tetapi ia berfungsi dengan cara yang berbeza.

1. Melantun

Menyahlantun memastikan fungsi hanya dipanggil selepas tempoh masa tertentu berlalu sejak acara terakhir. Dalam erti kata lain, ia menangguhkan pelaksanaan fungsi sehingga pengguna selesai melakukan tindakan, seperti menaip dalam medan teks atau mengubah saiz tetingkap. Ini amat berguna untuk senario di mana anda ingin menghalang fungsi daripada dipanggil terlalu kerap, seperti apabila pengguna menaip dalam bar carian.

Cara Debouncing Berfungsi:

• Apabila peristiwa dicetuskan, panggilan fungsi ditangguhkan untuk tempoh masa tertentu.
• Jika acara dicetuskan semula sebelum masa tunda berlalu, panggilan fungsi sebelumnya dibatalkan dan pemasa tunda ditetapkan semula.
• Fungsi ini hanya dilaksanakan sebaik sahaja masa kelewatan berlalu tanpa sebarang peristiwa lanjut.

Contoh Debouncing:

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

Dalam contoh ini:

• debouncedSearch hanya akan memanggil searchQuery selepas 500 milisaat berlalu tanpa seruan lain.
• Ini menghalang fungsi carian daripada dipanggil setiap kali aksara ditaip.

Gunakan Sarung untuk Menyahlantun:

• Input Carian: Apabila melaksanakan cadangan carian masa nyata.
• Saiz Semula Tetingkap: Untuk mengelakkan mencetuskan pengiraan semula reka letak pada setiap acara ubah saiz.
• Acara Tatal: Untuk mengelakkan penembakan fungsi semasa tatal berterusan, terutamanya dalam senario tatal tak terhingga.

2. Pendikit

Pendikit memastikan fungsi dipanggil paling banyak sekali setiap selang waktu tertentu, tidak kira berapa kali peristiwa itu dicetuskan. Ini berguna apabila anda ingin mengehadkan kekerapan panggilan fungsi, seperti mengehadkan bilangan kali pengguna boleh menatal atau mengubah saiz tetingkap dalam tempoh masa tertentu.

Cara Pendikit Berfungsi:

• Fungsi dilaksanakan serta-merta pada kali pertama acara dicetuskan.
• Selepas itu, ia dilaksanakan paling banyak sekali setiap n milisaat, walaupun acara itu dicetuskan dengan lebih kerap.

Contoh Pendikit:

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

Dalam contoh ini:

• throttledScroll akan memastikan logScrollEvent dipanggil paling banyak sekali setiap saat, tidak kira berapa banyak acara skrol yang dicetuskan pada masa itu.
• Fungsi ini dilaksanakan serta-merta pada kali pertama, dan panggilan seterusnya ditangguhkan untuk mengekalkan selang waktu.

Kes Penggunaan untuk Pendikit:

• Acara Tatal: Untuk mengehadkan kekerapan fungsi dipanggil semasa menatal (cth., memuatkan imej yang malas).
• Ubah Saiz Acara: Untuk mengoptimumkan bilangan kali fungsi saiz semula tetingkap dipanggil.
• Pergerakan Tetikus: Untuk mengelakkan pelaksanaan berterusan semasa pergerakan tetikus pantas.

3. Melantun lwn Pendikit: Perbezaan Utama

Ciri

Feature	Debouncing	Throttling
Function Execution	Executes after a delay when events stop	Executes at a fixed interval, no matter how many events occur
Use Case	Ideal for events that occur frequently but should trigger once after some idle time (e.g., input fields, search bars)	Ideal for events that fire continuously (e.g., scroll, resize) but should be limited to a fixed interval
Example Scenario	Search bar input where suggestions are updated only after the user stops typing for a certain period	Scroll events where a function should only run once every few seconds, even if the user scrolls frequently
Execution Frequency	Executes only once after the event stops firing	Executes periodically, based on the interval set
Effectiveness	Prevents unnecessary executions during rapid event firing	Controls the frequency of function executions, even during continuous events

Melantun Pendikit Pelaksanaan Fungsi Melaksanakan selepas kelewatan apabila acara berhenti Melaksanakan pada selang masa tetap, tidak kira berapa banyak peristiwa berlaku Kes Penggunaan Sesuai untuk peristiwa yang kerap berlaku tetapi harus dicetuskan sekali selepas beberapa waktu terbiar (cth., medan input, bar carian) Sesuai untuk acara yang menyala secara berterusan (cth., tatal, ubah saiz) tetapi harus dihadkan kepada selang waktu tetap Contoh Senario Input bar carian di mana cadangan dikemas kini hanya selepas pengguna berhenti menaip untuk tempoh tertentu Tatal peristiwa di mana fungsi hanya perlu dijalankan sekali setiap beberapa saat, walaupun jika pengguna menatal dengan kerap Kekerapan Pelaksanaan Melaksanakan sekali sahaja selepas acara berhenti menembak Melaksanakan secara berkala, berdasarkan selang yang ditetapkan Keberkesanan Menghalang pelaksanaan yang tidak perlu semasa penembakan acara pantas Mengawal kekerapan pelaksanaan fungsi, walaupun semasa acara berterusan

4. Contoh Praktikal: Menggunakan Debouncing dan Throttling Bersama

Anda boleh menggabungkan nyahlantun dan pendikit dalam situasi di mana anda memerlukan kedua-dua teknik untuk mengoptimumkan aplikasi anda. Sebagai contoh, anda mungkin mahu mendikitkan acara tatal sambil juga menyahlantun pertanyaan carian.

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

Dalam contoh ini:

• Acara tatal dicetuskan untuk dicetuskan sekali sahaja setiap saat.
• Input carian dinyahpantulkan untuk mencetuskan hanya selepas 500ms tidak aktif.

Kesimpulan

• Menyahlantun memastikan fungsi dilaksanakan selepas tempoh masa tertentu berlalu tanpa peristiwa dicetuskan, menjadikannya sesuai untuk senario seperti input carian atau saiz semula.
• Pendikit mengehadkan bilangan kali fungsi boleh dilaksanakan dalam jangka masa tertentu, menjadikannya berguna untuk acara seperti menatal atau mengubah saiz tetingkap.

Kedua-dua teknik membantu mengoptimumkan prestasi dan menghalang pelaksanaan yang tidak perlu, terutamanya dalam kes di mana peristiwa berlaku dengan pantas.

---

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun timbunan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Debouncing vs Throttling dalam JavaScript: Mengoptimumkan Fungsi Panggilan untuk Prestasi Lebih Baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!