JavaScript - Debouncing: Panduan untuk Pemula

Halo sana, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia debouncing. Jangan khawatir jika Anda belum pernah mendengar istilah ini sebelumnya - pada akhir tutorial ini, Anda akan dapat melakukan debouncing seperti seorang ahli!

JavaScript - Debouncing

Apa Itu Debouncing?

Bayangkan Anda berada di lift yang penuh orang, dan orang-orang terus menekan tombol "tutup pintu" berkali-kali. Akan ada kekacauan jika pintu menanggapi setiap tekanan tombol! Sebaliknya, lift menunggu sampai orang-orang berhenti menekan tombol untuk sejenak sebelum benar-benar menutup pintu. Itu sebenarnya apa yang dilakukan debouncing dalam programming.

Debouncing adalah praktek programming 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 apakah ada event lagi yang datang sebelum Anda bertindak!"

Mengapa Kita Butuh Debouncing?

mari设想一下 Anda sedang membuat fitur pencarian untuk sebuah website. Anda ingin menampilkan hasil pencarian saat pengguna mengetik, tapi Anda tidak ingin mengirim permintaan ke server untuk setiap tombol yang ditekan. Itu akan tidak efisien dan bisa membebani server Anda. Itu adalah tempat debouncing datang ke bantuan!

Cara Mengimplementasikan Debouncing di JavaScript

Sekarang, mari kita lipat lengan dan masuk ke dalam beberapa kode! Jangan khawatir jika Anda tidak mengerti segalanya segera - 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 sekali! Mari kita bongkar ini:

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

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

Dalam debounce, kita deklarasikan variabel timeoutId. Ini akan membantu kita untuk melacak timeout kita.
Kita mengembalikan fungsi baru yang melakukan debouncing:

Itu membersihkan 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 debounce 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 Debouncing

Peningkatan Performa: Debouncing mengurangi jumlah kali sebuah fungsi dipanggil, yang bisa meningkatkan performa secara signifikan, khususnya untuk operasi yang memakan banyak sumber daya.
Pengalaman Pengguna yang Lebih Baik: Itu bisa membuat aplikasi Anda tampak lebih responsif dengan mengurangi lag yang disebabkan oleh pembaruan yang terlalu频繁.
Penurunan Biaya: Untuk operasi yang melibatkan panggilan API, debouncing bisa mengurangi jumlah permintaan, potensialnya mengurangi biaya API.

Kasus Penggunaan Debouncing di Dunia Nyata

Bergabunglah dalam beberapa aplikasi praktis dari debouncing:

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 melakukan debouncing pada fungsi pencarian. Itu hanya akan mengambil hasil 300ms setelah pengguna berhenti mengetik, mencegah panggilan API yang tidak diperlukan.

2. Event Resize Jendela

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

const debouncedResize = debounce(handleResize, 250);

window.addEventListener('resize', debouncedResize);

Di sini, kita melakukan debouncing pada pengaturan ukuran jendela. Ini mencegah pengaturan ukuran dari pengguna terlalu sering dipanggil, yang bisa menyebabkan masalah performa.

3. Event Scrolling

const handleScroll = () => {
console.log('Di-scroll!');
// Memperbarui UI berdasarkan posisi scroll
};

const debouncedScroll = debounce(handleScroll, 100);

window.addEventListener('scroll', debouncedScroll);

Contoh ini melakukan debouncing pada pengaturan event scroll, memastikan performa yang lebih mulus saat memperbarui UI berdasarkan posisi scroll.

Tabel Metode Debouncing

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

Dan itu adalah dia, teman-teman! Anda baru saja belajar tentang keajaiban debouncing dalam JavaScript. Ingat, seperti belajar keterampilan baru, latihan membuat sempurna. Cobalah untuk mengimplementasikan debouncing dalam proyek Anda sendiri dan lihat bagaimana itu bisa meningkatkan performa.

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

Terus coding, terus belajar, dan yang paling penting, terus bersenang-senang dengan JavaScript!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Canvas

Tutorial Selanjutnya:

JavaScript - Kinerja