Hva er forskjellen mellom debounce og throttle?

Question

Accepted Answer

Begge begrenser hvor ofte en funksjon kjører som svar på raske, gjentatte hendelser — men med ulike tidsstrategi.

- **Debounce**: kjør funksjonen bare **etter at aktiviteten stopper** i N ms. Tilbakestiller timeren ved hvert kall. → "vent til de er ferdige."
- **Throttle**: kjør funksjonen **maksimalt en gang per N ms** under fortsatt aktivitet. → "kjør med jevn hastighet."

```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 skal man bruke hvilken

- **Debounce**: søk-mens-du-skriver, autosave, resize-slutt, validering etter at brukeren slutter å skrive — du vil ha *sluttverdien*.
- **Throttle**: scroll-handlere, mousemove, drag, rate-limiting — du vil ha *periodiske* oppdateringer mens handlingen pågår.

## Hvorfor det spiller en rolle

Begge forhindrer at dyrt arbeid (API-kall, layout-omberegning) kjører hundrevis av ganger per sekund, som er en nøkkelteknikk for front-end-ytelse.

Biblioteker som lodash gir robuste versjoner med leading/trailing-alternativer.