Ποια είναι η διαφορά μεταξύ debounce και throttle;

Question

Accepted Answer

Και οι δύο περιορίζουν πόσο συχνά εκτελείται μια συνάρτηση ως απόκριση σε γρήγορα, επαναλαμβανόμενα γεγονότα — αλλά με διαφορετικές στρατηγικές χρονοδιαγράμματος.

- **Debounce**: εκτέλεσε τη συνάρτηση μόνο **αφού η δραστηριότητα σταματήσει** για N ms. Μηδενίζει το χρονόμετρο σε κάθε κλήση. → "περίμενε μέχρι να τελειώσουν."
- **Throttle**: εκτέλεσε τη συνάρτηση **το πολύ μία φορά ανά N ms** κατά τη διάρκεια συνεχούς δραστηριότητας. → "τρέχε με σταθερό ρυθμό."

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

## Υλοποίηση 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
```

## Υλοποίηση 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
  };
}
```

## Πότε να χρησιμοποιήσεις ποια

- **Debounce**: αναζήτηση καθώς πληκτρολογείς, αυτόματη αποθήκευση, τέλος αλλαγής μεγέθους, επικύρωση αφού ο χρήστης σταματήσει να πληκτρολογεί — θέλεις την **τελική** τιμή.
- **Throttle**: χειριστές scroll, mousemove, σύρσιμο, περιορισμό ρυθμού — θέλεις **περιοδικές** ενημερώσεις ενώ η ενέργεια είναι σε εξέλιξη.

## Γιατί σημαίνει

Και οι δύο αποτρέπουν την εκτέλεση δαπανηρής εργασίας (κλήσεις API, επανυπολογισμός διάταξης) εκατοντάδες φορές το δευτερόλεπτο, η οποία είναι μια βασική τεχνική απόδοσης front-end.