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 ఎంపికలతో బలమైన సంస్కరణలను అందిస్తాయి.