Hvad er forskellen mellem debounce og throttle?

Question

Accepted Answer

Begge begrænser, hvor ofte en funktion kører som reaktion på hurtige, gentagne begivenheder — men med forskellige timingstrategier.

- **Debounce**: kør funktionen kun **efter aktiviteten stopper** i N ms. Nulstiller timeren ved hvert kald. → "vent, til de er færdige."
- **Throttle**: kør funktionen **højst én gang per N ms** under kontinuerlig aktivitet. → "kør med konstant hastighed."

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

## Hvornår skal man bruge hvilken

- **Debounce**: søgning mens du skriver, autogem, ændring af størrelse, validering efter brugeren stopper med at skrive — du vil have den **endelige** værdi.
- **Throttle**: scroll-handlere, mousemove, træk, hastighedsbegrænsning — du vil have **periodiske** opdateringer mens handlingen er i gang.

## Hvorfor det betyder noget

Begge forhindrer kørsel af dyrt arbejde (API-kald, layout-genberegning) hundredvis af gange i sekundet, hvilket er en nøgleefront-end-præstationsteknik.