Throttling e debouncing sono tecniche utilizzate per ottimizzare le prestazioni nelle applicazioni Web limitando il numero di volte in cui una funzione viene eseguita in un determinato periodo di tempo.

Limitazione

La limitazione limita la velocità con cui viene eseguita una funzione. Ciò significa che la funzione può essere chiamata solo una volta durante un intervallo di tempo specificato, indipendentemente da quante volte viene attivata. La limitazione è utile per le funzioni che vengono attivate di frequente, ad esempio quelle associate allo scorrimento o al ridimensionamento degli eventi.

Ecco un esempio di implementazione di una funzione di accelerazione:

In questa implementazione, la throttlefunzione accetta due parametri: la funzione da limitare e il ritardo tra ogni esecuzione della funzione. La funzione restituisce una nuova funzione che può essere chiamata al posto della funzione originale.

La lastCallvariabile memorizza il timestamp dell'ultima volta che è stata eseguita la funzione limitata. Se il timestamp corrente meno il timestamp dell'ultima chiamata è inferiore al ritardo, la funzione non fa nulla e restituisce. In caso contrario, la funzione esegue la funzione originale e aggiorna la lastCallvariabile al timestamp corrente.

Ecco un esempio di come utilizzare la throttlefunzione:

In questo esempio, la throttlefunzione viene utilizzata per limitare una funzione che viene chiamata quando la finestra viene ridimensionata. La funzione verrà chiamata solo una volta ogni 1000 ms (1 secondo), anche se la finestra viene ridimensionata più volte entro tale intervallo.

Antirimbalzo

Il debouncing, d'altra parte, ritarda l'esecuzione di una funzione fino a quando non è trascorso un certo periodo di tempo dall'ultima volta che la funzione è stata chiamata. Ciò significa che se la funzione viene attivata più volte entro l'intervallo di tempo specificato, verrà eseguita solo una volta allo scadere dell'intervallo di tempo specificato. L'antirimbalzo è utile per le funzioni che vengono attivate da eventi che possono attivarsi rapidamente, ad esempio le sequenze di tasti.

Ecco un esempio di implementazione di una funzione antirimbalzo:

In questa implementazione, la debouncefunzione accetta due parametri: la funzione da eliminare e il ritardo tra ogni esecuzione della funzione. La funzione restituisce una nuova funzione che può essere chiamata al posto della funzione originale.

La timervariabile memorizza l'ID del timer per la funzione setTimeout, che viene utilizzata per ritardare l'esecuzione della funzione. Se la funzione antirimbalzo viene chiamata nuovamente entro l'intervallo di tempo specificato, la clearTimeoutfunzione viene chiamata per annullare il timer e viene impostato un nuovo timer. Il nuovo timer eseguirà la funzione solo dopo che è trascorso l'intervallo di tempo specificato dall'ultima chiamata della funzione.

Ecco un esempio di come utilizzare la debouncefunzione:

In questo esempio, la debouncefunzione viene utilizzata per evitare il rimbalzo di una funzione che viene chiamata quando viene rilasciato un tasto. La funzione verrà chiamata solo una volta dopo che l'utente ha smesso di digitare per 1000 ms (1 secondo), anche se ha premuto più tasti entro tale intervallo.

Nel complesso, sia l'accelerazione che l'antirimbalzo possono essere tecniche utili per ottimizzare le prestazioni nelle applicazioni web controllando la frequenza di esecuzione delle funzioni. Utilizzando queste tecniche, possiamo ridurre il carico sul browser e migliorare l'esperienza dell'utente.

Spero che aiuti!