Rem Darurat JS: Debounce, Throttle, Memoization
Website-mu sudah cantik, datanya tampil sempurna. Tapi kenapa saat diakses di HP spesifikasi rendah terasa
sangat lagging (patah-patah)? Atau anehnya, API Server-mu jebol karena ditagih tagihan *Cloud*
$1,000 bulan ini akibat terlalu banyak Request?
Itu terjadi karena Tangan Manusia Terlalu Cepat. Menggeser layar *Scroll* bisa memicu event
200 kali per detik! Mengetik di kolom *Search* cepat memicu 15 Request API per kata! JavaScript butuh alat
peredam kecepatan. Di sinilah **Trio Pengontrol Performa** (Debounce, Throttle, Memoization) datang
menyelamatkan nyawa Server-mu!
🛑 1. Penunda Amarah: Debounce
Analoginya: Pintu Lift. Pintu lift tidak akan pernah menutup *selama* masih ada orang yang
terus-menerus memencet tombol "Buka" atau terus menerobos masuk berturut-turut. Pintu HANYA akan menutup jika
sudah Tidak ada lagi gangguan sama sekali selama 3 detik terakhir.
Kasus Ideal: Kolom **Live Search (Cari Produk)**. Jangan panggil API server setiap user
mengetik 1 huruf "I..P..H..O..N..E". Tunggu sampai jari user *berhenti mengetik* selama 500ms, BARULAH kirim 1x
Request API utuh ("IPHONE").
// Fungsi Utama Debounce (Memanfaatkan Closure & setTimeout)
function debounce(fungsiTarget, waktuTunda) {
let timerBatal;
return function(...argumen) {
clearTimeout(timerBatal); // 1. Batalin hitungan mundur sbelumnya (Reset Lift)
// 2. Mulai hitung mundur BARU dari Nol!
timerBatal = setTimeout(() => {
fungsiTarget.apply(this, argumen); // 3. KENDARAAN BERANGKAT!
}, waktuTunda);
}
}
// Cara Pakai di Kolom Pencarian Tokopedia/Shopee:
const cariProduk = debounce((keyword) => {
console.log(`🚀 FETCH API: Menarik produk seputar "${keyword}" dari Server...`);
}, 800); // Tunggu User berhenti ngetik selama 800ms!
⏱️ 2. Penjaga Gerbang Tiket: Throttle
Analoginya: Tembakan Senapan Mesin. Secepat apapun jarimu menarik pelatuk 100x/detik, senapan
tersebut sudah di-setting dari pabriknya HANYA bisa mengeluarkan peluru Maksimal 1 kali per 1
Detik yang konsisten.
Kasus Ideal: Event Scrolling & Mouse Move. Saat user scroll ke bawah, Browser
berteriak ratusan kali. Agar Web-mu tidak meledak, pasang Throttle agar API *Load More / Infinite Scroll* atau
animasi *Parallax*-mu dipanggil secara konstan maksimal hanyak 1x setiap 200 milidetik saja!
// Fungsi Utama Throttle (Memanfaatkan Boolean Kunci Tahan)
function throttle(fungsiTarget, jedaAmbangBatas) {
let sedangMendingin = false; // Kunci Gembok
return function(...argumen) {
if (sedangMendingin) return; // 1. Pelatuk ke-2 ke-3 diabaikan mentah-mentah!
fungsiTarget.apply(this, argumen); // 2. Pelatuk Pertama Lolos & Ditembakkan!
sedangMendingin = true; // 3. Kunci Gembok (Senjata Kepanasan)
setTimeout(() => {
sedangMendingin = false; // 4. Setelah X Detik, Gembok dibuka kembali! Siap tembak.
}, jedaAmbangBatas);
}
}
// Cara Pakai di Senjata Game atau Infinite Scroll Web:
const tembakLaser = throttle(() => {
console.log(`💥 DARRRR!!! Laser Merah Ditembakkan!`);
}, 2000); // Dipaksa hanya boleh keluar 1 laser setiap 2 detik aja.
🧠 3. Si Jenius Pengingat: Memoization
Analoginya: Menghafal Jawaban PR. Jika ada teman bertanya "Hasil 12345 dikali 98765?", pertama
kali kamu akan menghitungnya manual pakai kertas buram selama 2 menit (Berat CPU). Tapi jika 1 detik kemudian
teman lain menanyakan soal yang PERSIS SAMA, apakah kamu akan menghitung ulang? Tentu tidak! Kamu tinggal
menyebutkan Jawaban yang terakhir kamu ingat (Cache)!
Kasus Ideal: Kalkulasi Dashboard Finansial, Tabel Excel ratusan ribu baris berulang, dan
(terutama) pencegahan Render Ulang massal pada *React.js (useMemo)*.
// Mesin Pembuat Memo (Memanfaatkan Object sbg Rak Ingatan)
function bikinCatatanJawab(fungsiRumit) {
const rakBukuIngatan = {}; // Area kosong untuk menghafal
return function(pertanyaanAngka) {
// Cek apakah soal ini pernah dijawab sebelumnya?
if (rakBukuIngatan[pertanyaanAngka]) {
console.log("✅ Membacakan CACHE (Instant 0ms)...");
return rakBukuIngatan[pertanyaanAngka];
}
// Kalau belum pernah, yaudah hitung manual (Berkeringat CPU-nya) 🥵
console.log("⚙️ Murni Menghitung Komputer Butuh 5 Detik...");
const hasilAkhir = fungsiRumit(pertanyaanAngka);
// SIMPAN hasilnya ke dalam Rak Hafalan untuk masa depan!
rakBukuIngatan[pertanyaanAngka] = hasilAkhir;
return hasilAkhir;
}
}
🎮 Studi Kasus Mahakarya: Insiden API Jebol
Di bawah ini adalah perbandingan nyata Polosan (Tanpa Rem) vs Debounce (Direm). Cobalah ketik "Macbook Pro" dengan gaya mengetik biasa (cepat). Perhatikan berapa kali API Server dipanggil (ditagihkan *Hosting*) di Konsol bawah!
🎯 Live Test:
Buktikan Kerugian Server!
Terminal Log
Server
Tagihan
Cloud API: - Rp 0
*Mengetik kata "Macbook Pro" di Kolom Polos akan memanggil server sebanyak **11 Kali** (Biaya ditagih 11 Ribu membuang percuma huruf *M, Ma, Mac, Macb...*). Sedangkan di kolom bawah (Dilapisi Debounce 800ms) ia mau menunggu kamu selesai ngetik dan HANYA memanggil server **1 Kali Sahaja** (- Rp 1.000)! Server selamat, Dompet selamat ✅.