debounce اور throttle کے درمیان کیا فرق ہے؟

Question

Accepted Answer

دونوں تیزی سے، بار بار ہونے والے واقعات کے جواب میں ایک فنکشن کتنی بار چلتا ہے اس کو محدود کرتے ہیں — لیکن مختلف ٹائمنگ حکمت عملیوں کے ساتھ۔

- **Debounce**: فنکشن کو **صرف سرگرمی رک جانے کے بعد** N ms چلائیں۔ ہر کال میں ٹائمر دوبارہ سیٹ کریں۔ → "جب تک وہ مکمل نہ کریں انتظار کریں۔"
- **Throttle**: جاری سرگرمی کے دوران **N ms فی زیادہ سے زیادہ ایک بار** فنکشن چلائیں۔ → "مستقل شرح پر چلائیں۔"

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

## Debounce نفاذ

```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 نفاذ

```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
  };
}
```

## کون سا کب استعمال کریں

- **Debounce**: search-as-you-type، autosave، resize-end، صارف نے ٹائپ کرنا بند کرنے کے بعد تصدیق — آپ *آخری* قیمت چاہتے ہیں۔
- **Throttle**: scroll handlers، mousemove، drag، rate-limiting — جب کارروائی جاری ہو تو آپ *متواتر* اپڈیٹ چاہتے ہیں۔

## یہ کیوں اہم ہے

دونوں مہنگے کام (API کالز، تخطیط کی دوبارہ گنتی) کو فی سیکنڈ سیکڑوں بار ہونے سے روکتے ہیں، جو ایک اہم فرنٹ اینڈ کارکردگی کی تکنیک ہے۔

Lodash جیسی لائبریریں leading/trailing آپشنز کے ساتھ مضبوط ورژن فراہم کرتی ہیں۔