Apa perbedaan antara debounce dan throttle?

Question

IT Interview Practice · Accepted Answer

Keduanya membatasi seberapa sering fungsi berjalan sebagai respons terhadap peristiwa yang cepat dan berulang — tetapi dengan strategi waktu yang berbeda.

- **Debounce**: jalankan fungsi hanya **setelah aktivitas berhenti** selama N ms. Atur ulang timer pada setiap panggilan. → "tunggu sampai selesai."
- **Throttle**: jalankan fungsi **paling banyak sekali per N ms** selama aktivitas berkelanjutan. → "jalankan dengan laju konstan."

```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 menggunakan yang mana

- **Debounce**: pencarian-saat-anda-mengetik, autosave, resize-akhir, validasi setelah pengguna berhenti mengetik — Anda menginginkan nilai *akhir*.
- **Throttle**: penanganan scroll, mousemove, drag, pembatasan laju — Anda menginginkan pembaruan *berkala* saat tindakan sedang berlangsung.

## Mengapa ini penting

Keduanya mencegah menjalankan pekerjaan mahal (panggilan API, penghitungan ulang tata letak) ratusan kali per detik, yang merupakan teknik kinerja front-end kunci.

Perpustakaan seperti lodash menyediakan versi yang kuat dengan opsi leading/trailing.

Implementasi Debounce

Implementasi Throttle

Kapan menggunakan yang mana

Mengapa ini penting

Pertanyaan terkait