Debounce vs Throttle in JavaScript: Guida per Principianti con Esempi

JavaScript fornisce strumenti potenti per gestire la frequenza con cui una funzione viene eseguita in risposta a interazioni degli utenti, come lo scroll, la digitazione o il ridimensionamento della finestra. Due di questi strumenti sono il debounce e il throttle. Questi concetti migliorano le prestazioni controllando la frequenza di esecuzione delle funzioni, soprattutto quando ci si trova a gestire eventi che si attivano frequentemente.

In questa guida, esploreremo cosa sono il debounce e il throttle, come implementarli e quando usare l’uno rispetto all’altro.

---

Cos'è il Debouncing in JavaScript?

Il debounce è una tecnica utilizzata in JavaScript per limitare la frequenza con cui una funzione può essere eseguita dopo una sequenza di eventi rapidi e continui. Garantisce che una funzione venga chiamata solo dopo che è trascorso un certo lasso di tempo senza che l'evento venga attivato di nuovo.

Il debouncing è particolarmente utile quando il gestore degli eventi viene invocato più volte in rapida successione (come i tasti premuti in una casella di ricerca) e si desidera agire solo quando l'utente smette di interagire.

Caso d'uso del Debounce

Immagina un utente che digita in una barra di ricerca che attiva una chiamata API per recuperare i risultati. Senza il debounce, ogni singolo tasto invierebbe una richiesta, il che sarebbe inefficiente. Con il debounce, la richiesta verrà inviata solo dopo che l'utente smette di digitare per un certo periodo, evitando chiamate API inutili.

---

Come Ritardare una Funzione con il Debounce in JavaScript

Implementazione del Debounce

Ecco un semplice esempio su come implementare manualmente il debounce in JavaScript.

function debounce(func, delay) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

// Esempio d'uso:
const gestisciInput = () => {
    console.log('Recupero risultati di ricerca...');
};

const inputDebounced = debounce(gestisciInput, 300);

document.querySelector('input').addEventListener('input', inputDebounced);

In questo esempio:

• La funzione debounce prende due argomenti: la funzione da debouncizzare e il ritardo in millisecondi.
• setTimeout assicura che la funzione venga eseguita solo dopo che l'utente ha smesso di digitare per il tempo specificato (300ms).

Utilizzo delle librerie per il Debounce

Librerie JavaScript come Lodash e Underscore.js forniscono funzioni di debounce predefinite che semplificano il processo.

Esempio con Lodash:

const _ = require('lodash');

const gestisciInput = () => {
    console.log('Recupero risultati di ricerca...');
};

const inputDebounced = _.debounce(gestisciInput, 300);

document.querySelector('input').addEventListener('input', inputDebounced);

Con Lodash, la stessa funzionalità è ottenuta con meno righe di codice, fornendo al contempo compatibilità cross-browser.

---

Cos'è il Throttling in JavaScript?

Il throttling assicura che una funzione venga chiamata al massimo una volta in un periodo di tempo specificato, indipendentemente da quante volte l'evento viene attivato. Garantisce un flusso costante di esecuzioni a intervalli regolari, il che è particolarmente utile per eventi che possono essere attivati continuamente, come lo scroll o il ridimensionamento.

Caso d'uso del Throttle

Immagina di voler monitorare quanto in basso è arrivato un utente su una pagina. Se aggiorni la posizione dello scroll ogni volta che l'evento viene attivato, potresti sovraccaricare il browser. Il throttling ti consente di misurare la posizione dello scroll a intervalli regolari (ad esempio, ogni 200ms) per evitare calcoli inutili.

---

Come limitare l'esecuzione di una funzione con il Throttle in JavaScript

Implementazione del Throttle in JavaScript

Ecco come creare una funzione di throttle personalizzata in JavaScript:

function throttle(func, limit) {
    let inThrottle;
    return function (...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// Esempio d'uso:
const tracciaScroll = () => {
    console.log('Tracciamento della posizione di scroll...');
};

const scrollThrottled = throttle(tracciaScroll, 200);

window.addEventListener('scroll', scrollThrottled);

In questa implementazione:

• throttle prende la funzione e il limite di tempo (in millisecondi) come argomenti.
• La funzione verrà eseguita solo una volta entro il limite definito (200ms), anche se l'evento di scroll viene attivato più volte.

Utilizzo delle librerie per il Throttle in JavaScript

Simile al debounce, puoi usare Lodash o Underscore.js per implementare facilmente il throttling.

Esempio con Lodash:

const scrollThrottled = _.throttle(() => {
    console.log('Tracciamento della posizione di scroll...');
}, 200);

window.addEventListener('scroll', scrollThrottled);

Questa versione garantisce che la funzione venga eseguita non più di una volta ogni 200ms, anche se l'utente continua a scorrere.

---

Qual è la differenza tra Debounce e Throttle in JavaScript?

Debounce e throttle sono entrambe tecniche utilizzate per controllare la frequenza di esecuzione delle funzioni in risposta a eventi rapidi, ma hanno scopi e comportamenti distinti.

Aspetto	Debounce	Throttle
Scopo	Ritarda l'esecuzione della funzione fino a quando un certo tempo non è trascorso senza altri eventi.	Garantisce l'esecuzione regolare della funzione ogni X millisecondi, indipendentemente dal numero di eventi.
Migliori Casi d'Uso	Validazione input, autocomplete di ricerca, ridimensionamento finestra.	Tracciamento dello scroll, infinite scrolling, monitoraggio dei movimenti del mouse.
Come Funziona	La funzione viene chiamata solo una volta dopo che il flusso di eventi termina.	La funzione viene chiamata a intervalli regolari mentre gli eventi continuano a verificarsi.
Frequenza	La funzione viene chiamata dopo che la sequenza di eventi termina.	La funzione viene chiamata a intervalli regolari mentre gli eventi sono ancora in corso.
Esempio	Digitazione in una casella di ricerca (chiamata API dopo che l'utente smette di digitare).	Gestione eventi di scroll (tracciamento della posizione ogni 200ms).

Quando usare il Debounce in JavaScript

• Il debounce è ideale quando vuoi ritardare l'esecuzione di una funzione fino a quando un utente non smette di eseguire un'azione. Usalo quando ti aspetti raffiche di eventi e solo l'azione finale deve attivare la funzione, come nei campi di input di ricerca o durante il ridimensionamento delle finestre.

Quando usare il Throttle in JavaScript

• Il throttling è più appropriato quando è necessario controllare la frequenza con cui una funzione viene chiamata in risposta a eventi continui, come lo scroll o i movimenti del mouse. Usalo per mantenere un'esperienza utente fluida limitando il numero di esecuzioni di una funzione costosa.

---

Conclusione

Capire la differenza tra debounce e throttle può migliorare notevolmente le prestazioni e la reattività delle tue applicazioni JavaScript. Usa il debounce quando vuoi aspettare che un utente smetta di attivare un evento e opta per il throttle quando vuoi imporre un intervallo di esecuzione regolare, indipendentemente dal numero di eventi che si verificano.

Se pensi che l'articolo abbia un buon contenuto e abbia raggiunto l'obiettivo di spiegare le differenze tra il debounce e il throttle di una funzione in JavaScript, e vuoi supportarmi, puoi seguire questi semplici passaggi facili e gratuiti:

1. Lascia un mi piace cliccando sull'icona del cuore qui sotto;
2. Condividi questo post sui tuoi account social o con i tuoi amici;
3. Seguimi su Instagram, Facebook, Twitter e su Github;
4. Iscriviti alla newsletter qui sotto per non perderti nessun articolo, sconto o gossip (ce ne saranno tanti).

Ti auguro tante altre buone letture!