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**: शोध-जसे-तुम्ही-टाइप करा, स्वयंरक्षक-संरक्षण, आकार-अंत, वापरकर्ता टाइप करणे बंद केल्यानंतर सत्यापन — तुम्हाला *अंतिम* मूल्य हवे आहे.
- **Throttle**: स्क्रॉल हँडलर, mousemove, drag, दर-सीमित करणे — तुम्हाला क्रिया चालू असताना *नियतकालिक* अपडेट हवे आहेत.

## असे महत्वाचे का आहे

दोन्ही महागवर काम (API कॉल, लेआउट पुनर्गणना) दरसेकंद शेकडो वेळा चालण्यास प्रतिबंध करतात, जे एक मुख्य front-end कामगिरी तंत्र आहे.

लodash सारख्या लायब्ररीज leading/trailing पर्यायांसह मजबूत आवृत्त्या प्रदान करतात.