Mikä on ero debounce:n ja throttle:n välillä?

Question

Accepted Answer

Molemmat rajoittavat kuinka usein funktio suoritetaan nopeisiin, toistuviin tapahtumiin vastauksena — mutta erilaisilla ajoitusstrategioilla.

- **Debounce**: suorita funktio vain **sen jälkeen, kun aktiviteetti pysähtyy** N ms:ksi. Palauttaa ajastimen nollaan jokaisella kutsulla. → "odota kunnes he ovat valmiit."
- **Throttle**: suorita funktio **enintään kerran N ms:n välein** jatkuvan aktiviteetin aikana. → "suorita tasaisella nopeudella."

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

## Debounce-toteutus

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

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

## Milloin käyttää kumpaa

- **Debounce**: haku kirjoituksen aikana, automaattinen tallennus, koon muuttamisen loppu, validointi kun käyttäjä lopettaa kirjoittamisen — haluat **lopullisen** arvon.
- **Throttle**: scroll-käsittelijät, mousemove, vetäminen, nopeudenrajoitus — haluat **jaksottaisia** päivityksiä kun toiminto on käynnissä.

## Miksi se on tärkeää

Molemmat estävät kallista työtä (API-kutsut, asettelun uudelleenlaskenta) satoja kertoja sekunnissa, mikä on keskeinen frontend-suorituskykytekniiikka.