Debounce ve throttle farkı nedir?

Arama kutusuna "istanbul" yazdın. Sekiz harf, sekiz ayrı keyup olayı — ve sekiz ayrı API isteği gitti. Kullanıcı bir kere aradı, sen sunucuya sekiz kere sordun.

Fatura

Bunu on bin kullanıcıyla çarp: seksen bin istek. Bunların yedide altısı, kullanıcı yazmaya devam ettiği için cevap gelmeden çöpe gidiyor.

Debounce: son olayı bekle

Debounce her tetiklendiğinde sayacı sıfırlar. Belirlenen süre (örneğin 300ms) boyunca yeni bir tetikleme gelmezse, en son isteği bir kere gönderir.

function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
 
const search = debounce((query) => fetch(`/api/search?q=${query}`));

Sekiz tuş vuruşu, kullanıcı yazmayı bıraktığında tek bir isteğe düşüyor.

Throttle: düzenli aralıkla akıt

Throttle beklemez. Belirlenen aralıkta (örneğin 300ms) en fazla bir kez geçiş izni verir, arada gelen olayları yutar.

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

Debounce son olayı önemser, throttle düzenli aralığı önemser.

Hangisi nerede

Karıştırmamak için basit bir ayrım: sonucu bekleyebiliyorsan debounce — arama kutusu, form doğrulama, otomatik kaydetme. Akışı seyreltmen gerekiyorsa throttle — scroll takibi, pencere boyutlandırma, fare hareketi.

Kapanış

İkisi için de kütüphaneye gerek yok, sekiz satırlık bir fonksiyon yeterli. Önemli olan hangisinin nerede kullanılacağını doğru seçmek.