Debounce ve Throttle Nedir? Arama ve Scroll Performansı İçin Pratik Rehber

Debounce ve throttle farkı nedir? Arama input'u, resize ve scroll olaylarında hangi tekniği ne zaman kullanmanız gerektiğini örneklerle görün.

Debounce ve Throttle Nedir?

Input yazarken, scroll ederken veya pencere boyutu değişirken olaylar saniyede onlarca kez tetiklenebilir. Bu olaylara her seferinde ağır işlem bağlamak UI'ı yavaşlatır. Debounce ve throttle bu yoğunluğu yönetmek için kullanılır.

Kısa Fark

Debounce: Olaylar durduktan sonra tek sefer çalıştırır.
Throttle: Belirli aralıklarla en fazla bir kez çalıştırır.

Ne Zaman Hangisi?

Senaryo	Öneri	Neden
Arama kutusu	Debounce	Kullanıcı yazmayı bitirdiğinde API çağrısı yapmak için
Scroll pozisyonu izleme	Throttle	Sabit aralıkta güncelleme yeterli
Window resize	Debounce	Boyut değişimi bittikten sonra hesaplama yapmak için

Debounce Örneği

function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const search = debounce((q) => {
  fetch("/api/search?q=" + encodeURIComponent(q));
}, 400);

Throttle Örneği

function throttle(fn, interval = 200) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn(...args);
    }
  };
}

window.addEventListener("scroll", throttle(() => {
  console.log(window.scrollY);
}, 100));

Sık Hatalar

Debounce sürelerini rastgele seçmek: UX'i geciktirebilir; gerçek senaryoda ölçün.
Her yere throttle koymak: Bazı akışlarda son değeri kaçırabilirsiniz.
Cleanup unutmak: Bileşen unmount olduğunda timer/event listener temizlenmelidir.

Sonuç

Debounce ve throttle küçük gibi görünür ama doğru kullanıldığında ağ trafiğini düşürür, CPU yükünü azaltır ve akıcı bir arayüz sağlar. Kural basit: "bittiğinde çalıştır" için debounce, "akarken kontrollü çalıştır" için throttle.