Cila është ndryshimi midis debounce dhe throttle?

Question

Accepted Answer

Të dyja kufizohen se sa shpesh funksioni ekzekutohet në përgjigje të ngjarjeve të shpejta, të përsëritura — por me strategji të ndryshme të kohës.

- **Debounce**: ekzekutoni funksionin vetëm **pasi të ndalojë aktiviteti** për N ms. Rivendosni timer-in në çdo thirrje. → "prisni derisa të përfundojë."
- **Throttle**: ekzekutoni funksionin **maksimum një herë për N ms** gjatë aktiviteti të vazhdueshëm. → "ekzekutoni me një normë konstante."

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

## Zbatimi 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
```

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

## Kur të përdorni cilin

- **Debounce**: kërkimi ndërsa shkruani, autosave, fund i ndryshueshmërisë, vlefshmëri pasi përdoruesi të ndalojë të shkruajë — dëshironi vlerën *përfundimtare*.
- **Throttle**: përpunuesit e scroll, mousemove, drag, rate-limiting — dëshironi përditësime *periodike* ndërsa veprimi është në vazhdim.

## Pse është e rëndësishme

Të dyja parandalojnë ekzekutimin e punës të shtrenjtë (thirjet API, rillogaritja e layout-it) qindra herë në sekondë, e cila është një teknikë kyçe e optimalizmit të front-end.

Biblioteka si lodash ofrojnë versione të fuqishme me opsionet leading/trailing.