JavaScript - Penyedutan: Panduan Pemula

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia penyedutan. Jangan khawatir jika Anda belum pernah mendengar istilah ini sebelumnya - pada akhir panduan ini, Anda akan bisa penyedut seperti seorang pro!

Apa Itu Penyedutan?

Bayangkan Anda berada di lif yang ramai, dan orang-orang terus menekan tombol "tutup pintu". Itu akan menjadi chaos jika pintu merespon setiap tekanan tunggal! Sebaliknya, lif menunggu sampai orang-orang berhenti menekan tombol untuk sejenak sebelum benar-benar menutup pintu. Itu sebenarnya apa yang penyedutan lakukan dalam pemrograman.

Penyedutan adalah praktik pemrograman yang digunakan untuk memastikan bahwa tugas yang memakan waktu banyak tidak dinyalakan terlalu sering, membuatnya lebih efisien. Itu seperti mengatakan ke kode Anda, "Hey, tunggu sebentar dan lihat jika ada lagi peristiwa ini sebelum Anda bertindak!"

Mengapa Kita Butuh Penyedutan?

mari katakan Anda sedang membuat fitur pencarian untuk situs web. Anda ingin menampilkan hasil pencarian saat pengguna mengetik, tetapi Anda tidak ingin mengirim permintaan ke server untuk setiap keystroke. Itu akan tidak efisien dan bisa membebani server Anda. Itu di mana penyedutan datang untuk menyelamatkan!

Cara Menerapkan Penyedutan di JavaScript

Sekarang, mari kita mulai kerjakan dan masuk ke dalam kode! Jangan khawatir jika Anda belum mengerti segalanya sekarang - kita akan membongkar itu langkah demi langkah.

function debounce(func, delay) {
let timeoutId;

return function(...args) {
clearTimeout(timeoutId);

timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}

Wah, itu banyak untuk diambil! Mari kita bongkar itu:

1. Kita mendefinisikan sebuah fungsi yang disebut debounce yang menerima dua parameter:

• func: Fungsi yang kita ingin penyedut
• delay: Jumlah milidetik untuk menunggu sebelum memanggil fungsi

2. Dalam debounce, kita deklarasikan variabel timeoutId. Ini akan membantu kita untuk melacak timeout kami.

3. Kita mengembalikan fungsi baru yang melakukan penyedutan sebenarnya:

• Itu menghapus semua timeout yang ada menggunakan clearTimeout(timeoutId).
• Itu menyetel timeout baru menggunakan setTimeout().
• Setelah delay yang ditentukan, itu memanggil fungsi asli dengan argumen apa pun yang diberikan kepadanya.

Sekarang, mari kita lihat bagaimana kita bisa menggunakan fungsi penyedutan ini:

const expensiveOperation = () => {
console.log("Melakukan operasi mahal...");
};

const debouncedOperation = debounce(expensiveOperation, 1000);

// Simulasi panggilan cepat
for (let i = 0; i < 5; i++) {
debouncedOperation();
}

Dalam contoh ini, meskipun kita memanggil debouncedOperation lima kali secara cepat, expensiveOperation hanya akan dijalankan sekali, setelah delay 1 detik.

Manfaat Penyedutan

1. Peningkatan Performa: Penyedutan mengurangi jumlah kali sebuah fungsi dipanggil, yang bisa meningkatkan performa secara signifikan, khususnya untuk operasi yang memakan banyak sumber daya.

2. Pengalaman Pengguna yang Lebih Baik: Itu bisa membuat aplikasi Anda terasa lebih responsif dengan mengurangi lag yang disebabkan oleh pembaruan yang sering.

3. Penurunan Biaya: Untuk operasi yang melibatkan panggilan API, penyedutan bisa mengurangi jumlah permintaan, potentially menyelamatkan biaya API.

Contoh Penggunaan Penyedutan di Dunia Nyata

Bergabunglah beberapa aplikasi praktis dari penyedutan:

1. Input Pencarian

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

const fetchSearchResults = (query) => {
// Simulasi panggilan API
console.log(`Mengambil hasil untuk: ${query}`);
};

const debouncedSearch = debounce(fetchSearchResults, 300);

searchInput.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});

Dalam contoh ini, kita penyedut fungsi pencarian. Itu hanya akan mengambil hasil 300ms setelah pengguna berhenti mengetik, mencegah panggilan API yang tidak diperlukan.

2. Peristiwa Resize Window

const handleResize = () => {
console.log('Jendela diubah ukurannya!');
// Lakukan penyesuaian tata letak
};

const debouncedResize = debounce(handleResize, 250);

window.addEventListener('resize', debouncedResize);

Di sini, kita penyedut pengaturan resize. Ini mencegah pengaturan dipanggil terlalu sering saat perubahan ukuran jendela, yang bisa menyebabkan masalah performa.

3. Peristiwa Gulir

const handleScroll = () => {
console.log('Digulir!');
// Perbarui UI berdasarkan posisi gulir
};

const debouncedScroll = debounce(handleScroll, 100);

window.addEventListener('scroll', debouncedScroll);

Contoh ini penyedut pengaturan gulir, memastikan performa yang lebih mulus saat memperbarui UI berdasarkan posisi gulir.

Tabel Metode Penyedutan

Metode	Deskripsi	Contoh
setTimeout	Menyetel timer yang menjalankan fungsi sekali timer berakhir	setTimeout(func, delay)
clearTimeout	Membatalkan timeout yang sebelumnya ditetapkan oleh setTimeout()	clearTimeout(timeoutId)
apply	Memanggil fungsi dengan this nilai yang diberikan dan argumen yang diberikan sebagai array	func.apply(this, args)

Dan itu dia, teman-teman! Anda baru saja belajar tentang keajaiban penyedutan di JavaScript. Ingat, seperti belajar keterampilan baru, latihan membuat sempurna. Cobalah menerapkan penyedutan di proyek Anda sendiri dan lihat bagaimana itu bisa meningkatkan performa mereka.

Siapa sangka bahwa sesuatu yang sederhana seperti "menunggu sebentar" bisa begitu kuat dalam pemrograman? Itu seperti peribahasa lama mengatakan, "Kesabaran adalah kebaikan" - dan dalam kasus penyedutan, itu juga peningkat performa!

Terus coding, terus belajar, dan terutama, terus bersenang-senang dengan JavaScript!

Credits: Image by storyset