Debounce e Throttle in JavaScript: Semplice Guida

Introduzione

In applicazioni JavaScript che gestiscono eventi utente frequenti, come il ridimensionamento del browser o la digitazione in un campo di input, è fondamentale ottimizzare le prestazioni per evitare ritardi e blocchi. Debounce e throttle sono due tecniche di ottimizzazione comuni che riducono la frequenza con cui viene eseguita una funzione in risposta a eventi ripetuti. Sebbene entrambe mirino a migliorare le prestazioni, funzionano in modo diverso e sono adatte a scenari distinti.

Debounce

Debounce garantisce che una funzione venga eseguita solo una volta per un determinato periodo di tempo, indipendentemente dal numero di volte in cui viene attivato l’evento. Ciò significa che se l’evento viene attivato più volte in rapida successione, la funzione verrà eseguita solo una volta al termine del periodo di ritardo specificato.

Esempio di Debounce

Consideriamo un caso d’uso in cui si desidera ridimensionare un elemento solo dopo che l’utente ha smesso di ridimensionare la finestra del browser. Ecco come implementare il debounce in questo scenario:

function debounce(func, delay) {
  let timeout;
  return function () {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(func, delay);
  };
}

const resizeHandler = debounce(() => {
  // Ridimensiona l'elemento
}, 250); // Ritardo di 250 millisecondi

window.addEventListener('resize', resizeHandler);

In questo esempio, la funzione debounce avvolge la funzione da eseguire, resizeHandler, e introduce un ritardo di 250 millisecondi. Ogni volta che l’evento resize viene attivato, viene chiamata la funzione debounce. Se la funzione debounce viene chiamata prima che il ritardo sia scaduto, il timer esistente viene cancellato e ne viene impostato uno nuovo. Di conseguenza, la funzione resizeHandler viene eseguita solo una volta al termine del ritardo di 250 millisecondi, indipendentemente dal numero di volte in cui l’evento resize viene attivato durante quel periodo.

Throttle

Throttle limita il numero massimo di volte in cui una funzione può essere eseguita in un determinato periodo di tempo. Ciò significa che se l’evento viene attivato più volte in rapida successione, la funzione verrà eseguita solo a intervalli regolari, indipendentemente dal numero di volte in cui viene attivato l’evento tra un’esecuzione e l’altra.

Esempio di Throttle

Consideriamo un caso d’uso in cui si desidera eseguire una ricerca API solo una volta ogni 500 millisecondi, indipendentemente dalla velocità con cui l’utente digita. Ecco come implementare il throttle in questo scenario:

function throttle(func, delay) {
  let lastRun = 0;
  return function () {
    const now = Date.now();
    if (now - lastRun >= delay) {
      func();
      lastRun = now;
    }
  };
}

const searchHandler = throttle(() => {
  // Esegui la ricerca API
}, 500);

const input = document.getElementById('searchInput');
input.addEventListener('input', searchHandler);

In questo esempio, la funzione throttle avvolge la funzione da eseguire, searchHandler, e introduce un ritardo di 500 millisecondi. Ogni volta che l’evento input viene attivato, viene chiamata la funzione throttle. Se la funzione throttle viene chiamata prima che il ritardo sia scaduto, l’esecuzione viene ignorata. Se invece il ritardo è scaduto, la funzione searchHandler viene eseguita e il timestamp dell’ultima esecuzione viene aggiornato. Di conseguenza, la funzione searchHandler può essere eseguita al massimo una volta ogni 500 millisecondi, indipendentemente dalla velocità con cui l’utente digita.

Ci può tornare utile ad esempio se abbiamo dei campi con auto completamento e non vogliamo effettuare troppe richieste al backend.

Codice di prova

Ho creato un piccolo esempio per mostrarvi la differenza tra debounce e throttle nella gestione degli eventi ripetuti di click.
Provate a clicare velocemente e per più di 1 secondo nei div grigi e guardate quando si illuminano.

See the Pen Debounce vs Throttle by Diego Betto (@bettodiego) on CodePen.

Conclusione

Debounce e throttle sono strumenti preziosi per ottimizzare le prestazioni di applicazioni JavaScript che gestiscono eventi utente frequenti.

La scelta tra debounce e throttle dipende dallo scenario specifico.

• Se è importante garantire che una funzione venga eseguita solo una volta per un determinato periodo di tempo, utilizzare il debounce.\
• Se è importante limitare il numero massimo di volte in cui una funzione può essere eseguita in un determinato periodo di tempo, utilizzare il throttle.

Buon coding! 🙂