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**: શોધ-જેમ-તમે-પ્રકાર, autosave, પુનરાવર્તન-સમાપ્ત, વપરાશકર્તા ટાઇપ કરવાનું બંધ કર્યા પછી માન્યતા — તમે *અંતિમ* મૂલ્ય ઈચ્છો છો.
- **Throttle**: સ્ક્રોલ હેન્ડલર્સ, mousemove, ડ્રેગ, દર-મર્યાદા — તમે ક્રિયા ચાલુ હોય ત્યારે *સમયાંતર* અપડેટ્સ ઈચ્છો છો.

## તે શા માટે મહત્વપૂર્ણ છે

બંને મોંઘા કાર્યને ફાયર કરવાથી બચાવે છે (API કૉલ્સ, લેઆઉટ રિકેલ્ક્યુલેશન) પ્રતિ સેકન્ડે સેંકડો વખત, જે મુખ્ય ફ્રન્ટ-એન્ડ પ્રદર્શન તકનીક છે.

Lodash જેવી લાઇબ્રેરીઓ અગ્રણી/અનુસરણ વિકલ્પો સાથે મજબૂત સંસ્કરણો પ્રદાન કરે છે.