X'inhu d-differenza bejn debounce u throttle?

Question

Accepted Answer

Kemm-it-tnejn jillimitaw kemm-il-ħin li funzjoni taħdem bħala rispons għal avvenimenti veloċi u ripetuti — imma b'strateġiji ta' timing differenti.

- **Debounce**: ħaddem il-funzjoni biss **wara li l-attività tieqaf** għal N ms. Irrisettja t-timer fuq kull sejħa. → "stenna sal-iskond."
- **Throttle**: ħaddem il-funzjoni **għall-aktar darba waħda kull N ms** matul attività kontinwa. → "ħaddem b'rata kostanti."

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

## Implementazzjoni ta' 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
```

## Implementazzjoni ta' 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
  };
}
```

## Meta tuża liema

- **Debounce**: tifla-waqt-id-dettija, jiħfx-awtomatikament, tmiem-bidla-ta'-daqs, validazzjoni wara l-utent jieqaf milli jikteb — trid il-valur *finali*.
- **Throttle**: mandieb ta' scroll, mousemove, drag, limitu-ta'-rata — trid ażżornamenti *perjodiċi* matul id-dazzjoni.

## Għaliex din hija importanti

Kemm-it-tnejn jipprevvenu li ħidmet għalja (sejħat API, kalkolu mill-ġdid ta' layout) ċentinaja ta' drabi kull sekonda, li hija teknika ewlenija ta' performa ta' front-end.

Ktajbiet bħal lodash jipprovdu verżjonijiet robbusti b'għażliet leading/trailing.