Koks yra skirtumas tarp debounce ir throttle?

Question

IT Interview Practice · Accepted Answer

Abi riboja, kaip dažnai funkcija vykdoma atsakant į greitą, kartotinį įvykį — tačiau naudodami skirtingas laiko strategijas.

- **Debounce**: vykdyti funkciją tik **po to, kai veikla sustoja** N ms. Atnaujinti laikmačį kiekviename iškvietimoje. → "laukti, kol baigsis."
- **Throttle**: vykdyti funkciją **dažniausiai kartą per N ms** nuolatinės veiklos metu. → "vykdyti pastoviu greičiu."

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

## Debounce realizacija

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

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

## Kada naudoti kurią

- **Debounce**: paieška rašant, automatinis išsaugojimas, dydžio keitimo pabaiga, validacija po to, kai naudotojas nustoja rašyti — norite *galutinės* reikšmės.
- **Throttle**: slinkties tvarkytojai, mousemove, drag, greičio ribojimas — norite *periodinių* atnaujinimų, kai vyksta veiksmas.

## Kodėl tai svarbu

Abi apsaugo nuo brangaus darbo vykdymo (API iškvietimai, maketavimo perskaičiavimas) šimtus kartų per sekundę, o tai yra pagrindinė front-end našumo technika.

Bibliotekos, tokios kaip lodash, suteikia patikimas versijas su leading/trailing parinktimis.

Debounce realizacija

Throttle realizacija

Kada naudoti kurią

Kodėl tai svarbu

Susiję klausimai