debounce ile throttle arasındaki fark nedir?

Question

Accepted Answer

İkisi de hızlı, tekrarlanan olaylara yanıt olarak bir fonksiyonun kaç sıklıkta çalıştığını sınırlar — ancak farklı zamanlama stratejileriyle.

- **Debounce**: fonksiyonu **yalnızca aktivite durmuş** N ms sonra çalıştırın. Her çağrıda zamanlayıcıyı sıfırlayın. → "bitirmesini bekle."
- **Throttle**: fonksiyonu **N ms başına en fazla bir kez** sürekli aktivite sırasında çalıştırın. → "sabit bir hızda çalıştır."

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## Debounce uygulaması

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## Throttle uygulaması

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## Hangisini ne zaman kullanacağınız

- **Debounce**: search-as-you-type, autosave, resize-end, kullanıcı yazıp bitirdikten sonra doğrulama — *son* değeri istiyorsunuz.
- **Throttle**: scroll handlers, mousemove, drag, rate-limiting — eylem devam ederken *periyodik* güncellemeleri istiyorsunuz.

## Neden önemli

İkisi de pahalı işin (API çağrıları, düzen yeniden hesaplaması) saniyede yüzlerce kez yapılmasını engeller; bu da ana ön uç performans tekniğidir.

lodash gibi kütüphaneler leading/trailing seçenekleriyle sağlam sürümler sağlar.