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-जैसे-आप-टाइप, autosave, resize-end, उपयोगकर्ता के टाइप करना बंद करने के बाद सत्यापन — आप *अंतिम* मान चाहते हैं।
- **Throttle**: scroll हैंडलर्स, mousemove, drag, rate-limiting — आप क्रिया चलते समय *आवधिक* अपडेट चाहते हैं।

## यह महत्वपूर्ण क्यों है

दोनों महंगे कार्य (API कॉल, लेआउट पुनर्गणना) को प्रति सेकंड सैकड़ों बार फायर करने से रोकते हैं, जो एक मुख्य फ्रंट-एंड प्रदर्शन तकनीक है।

Lodash जैसी लाइब्रेरीज leading/trailing विकल्पों के साथ मजबूत संस्करण प्रदान करती हैं।