Kwa nini kuna tofauti kati ya debounce na throttle?

Question

Accepted Answer

Zote mbili hupunguza jinsi kazi inavyofanya kwa jibu la matukio ya haraka, yanayorudia — lakini kwa mikakati tofauti ya muda.

- **Debounce**: endesha kazi **baada tu ya shughuli kusimama** kwa N ms. Anza upya kituo kwa kila simu. → "subiri hadi wakapo tayari."
- **Throttle**: endesha kazi **mara moja zaidi kwa N ms** wakati wa shughuli zinazoendelea. → "endesha kwa kiwango thabiti."

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

## Utekelezaji wa 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
```

## Utekelezaji wa 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
  };
}
```

## Wakati wa kutumia gani

- **Debounce**: search-as-you-type, autosave, resize-end, kuthibitisha baada ya mtumiaji kusimama kuandika — unataka thamani ya *mwisho*.
- **Throttle**: scroll handlers, mousemove, drag, rate-limiting — unataka sasisho la *periodic* wakati kitendo kinabaki.

## Kwa nini kina umuhimu

Zote mbili huzuia kufanya kazi ghali (API calls, layoutomumutation) mara mamia kwa sekunde, ambayo ni mbinu muhimu ya performance ya front-end.

Maktaba kama lodash inatoa matolani wenye nguvu yenye alternatifu za leading/trailing.