Apa bedane antara debounce lan throttle?

Question

Accepted Answer

Loro-lorone mbatesi sakarane fungsi mlaku-mlaku mangsuli acara cepet lan sering — nanging nganggo strategi timing sing beda.

- **Debounce**: jalanake fungsi mung **sawise aktivitas mandheg** kanggo N ms. Baleni timer ing saben call. → "anteng nganti wis rampung."
- **Throttle**: jalanake fungsi **paling akeh siji kali per N ms** sajrone aktivitas terus-terusan. → "mlaku nganggo tingkat tetep."

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

## Implementasi Debounce

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

## Implementasi Throttle

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

## Kapan nganggo sing mana

- **Debounce**: cari sambil ketik, simpan otomatis, resize-akhir, validasi sawise user mandheg ketik — sampeyan pengen *nilai final*.
- **Throttle**: handler scroll, mousemove, drag, rate-limiting — sampeyan pengen *update periodik* anggone aksi lagi mlaku.

## Menapa iki penting

Roro-lorone nyegah malaning pekerjaan larang (API calls, layout recalculation) atusan kali per detik, sing dadi teknik performa front-end kunci.

Pustaka kaya lodash nyedhiyake versi tekan-tekan nganggo pilihan leading/trailing.