Vad är skillnaden mellan debounce och throttle?

Question

Accepted Answer

Båda begränsar hur ofta en funktion körs som svar på snabba, upprepade händelser — men med olika tidningsstrategier.

- **Debounce**: kör funktionen endast **efter att aktiviteten har stoppats** i N ms. Återställer timern vid varje anrop. → "vänta tills de är klara."
- **Throttle**: kör funktionen **högst en gång per N ms** under kontinuerlig aktivitet. → "kör med jämn takt."

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

## Debounce-implementering

```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-implementering

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

## När du ska använda vilken

- **Debounce**: search-as-you-type, autosave, resize-end, validering efter att användaren slutar skriva — du vill ha det *slutliga* värdet.
- **Throttle**: scroll-hanterare, mousemove, drag, rate-limiting — du vill ha *periodiska* uppdateringar medan åtgärden pågår.

## Varför det är viktigt

Båda förhindrar att dyrt arbete (API-anrop, layoutomräkning) körs hundratals gånger per sekund, vilket är en viktig front-end-prestandateknik.

Bibliotek som lodash tillhandahåller robusta versioner med leading/trailing-alternativ.