Debounce vs Throttle in JavaScript, in Forma Visiva | We.Inc
Muovi il puntatore sul pad e osserva eventi grezzi, chiamate con debounce e chiamate con throttle sulla stessa timeline. Funzioni debounce e throttle da copiare, più hook React.
Il debounce aspetta che le chiamate si fermino per un tempo stabilito, poi esegue una volta sola, ed è adatto a caselle di ricerca e salvataggio automatico. Il throttle esegue al massimo una volta per intervallo mentre le chiamate continuano ad arrivare, ed è adatto a scroll, resize e tracciamento del puntatore. Entrambi ricevono una funzione e un ritardo in millisecondi e restituiscono una funzione avvolta da chiamare al posto dell'originale.
Quale usare
Situazione
Usa
Perché
Ricerca mentre si scrive
Debounce, circa 300 ms
Una sola richiesta dopo che la persona si ferma
Salvataggio automatico di un modulo
Debounce, circa 1000 ms
Salva una volta quando la digitazione si assesta
Posizione di scroll o barra di avanzamento
Throttle, circa 100 ms
Aggiornamenti regolari durante lo scroll
Calcoli di layout al resize della finestra
Throttle o debounce
Throttle per un feedback live, debounce per la dimensione finale
Evitare doppi clic di invio
Debounce sul leading edge
Conta il primo clic, le ripetizioni vengono ignorate
I due termini si confondono perché entrambi riducono la frequenza con cui una funzione viene eseguita. Il pad qui sotto mostra la differenza su una timeline condivisa: ogni evento grezzo come una tacca sottile, ogni chiamata con debounce e ogni chiamata con throttle come un punto. Cambia il ritardo e lo schema cambia con lui.
Muovi il puntatore o il dito sul pad, oppure tieni premuto un tasto mentre ha il focus.
Gli eventi grezzi riempiono la corsia in alto. La corsia centrale mostra le chiamate con debounce, quella in basso le chiamate con throttle.
Trascina il cursore del ritardo e ripeti per vedere come l'intervallo cambia entrambi gli schemi.
Copia le funzioni semplici o gli hook React qui sotto per il tuo codice.
Crea la funzione con debounce una sola volta. Crearne una nuova a ogni render di React azzera il timer, quindi non scatta mai.
Annulla le chiamate in sospeso quando un componente viene smontato, altrimenti una chiamata in ritardo può aggiornare qualcosa che non esiste più.
Per le animazioni legate allo scroll, requestAnimationFrame spesso funziona meglio di un intervallo di throttle fisso.
Applica il debounce alla parte costosa, come la richiesta di rete, non allo stato del campo stesso, altrimenti la digitazione sembra lenta.
Domande frequenti
Qual è la differenza tra debounce e throttle?
Il debounce riavvia il timer a ogni chiamata ed esegue solo quando le chiamate si fermano. Il throttle ignora le chiamate dentro la finestra corrente ma esegue di nuovo appena la finestra è passata, quindi scatta con regolarità durante una lunga raffica.
Cosa sono leading edge e trailing edge?
Il leading edge è la prima chiamata di una raffica; il trailing edge è il momento in cui finisce l'intervallo della raffica. Un debounce trailing esegue dopo la pausa, uno leading esegue subito e poi ignora le chiamate fino alla pausa. I throttle possono scattare su uno dei due edge o su entrambi.
Mi serve lodash per il debounce?
No. Le funzioni in questa pagina sono di poche righe ciascuna. Una versione di libreria aggiunge opzioni come maxWait, cancel e flush, comode ma facili da aggiungere da solo se te ne serve solo una.
Quanto deve durare il ritardo?
Non esiste un unico numero giusto. Parti da circa 300 millisecondi per la digitazione e 100 per scroll o puntatore, poi regola a sensazione. Più breve sembra più reattivo ma fa risparmiare meno lavoro.
Come funziona il debounce
Ogni chiamata cancella il timer in sospeso e ne avvia uno nuovo. Solo quando il timer sopravvive all'intero ritardo la funzione originale viene eseguita, con gli argomenti dell'ultima chiamata.
Questo rende il debounce perfetto per cogliere l'intenzione: non ti interessa ogni tasto premuto, solo la parola che qualcuno ha finito di scrivere. Il prezzo è la latenza, perché non succede nulla fino alla pausa.
Come funziona il throttle
Un throttle ricorda quando è stato eseguito l'ultima volta. Una chiamata dentro l'intervallo viene scartata oppure, nella versione trailing, conservata per essere eseguita alla fine dell'intervallo. Le chiamate fuori dall'intervallo vengono eseguite subito.
Usalo quando l'utente deve vedere un feedback continuo, come un header sticky che reagisce allo scroll, ma eseguire a ogni evento sarebbe uno spreco.
Versioni in JavaScript puro
debounce(fn, wait)
Trailing edge. cancel() elimina qualsiasi chiamata in sospeso.
throttle(fn, wait)
Esegue sul leading edge, poi ancora una volta alla fine della finestra se nel frattempo sono arrivate chiamate, così l'ultimo valore non va mai perso.
Hook React
useDebouncedCallback
Mantiene un solo timer per tutta la vita del componente, chiama sempre la callback più recente e cancella il timer allo smontaggio.
useThrottledValue
Restituisce una copia di un valore che cambia rapidamente, aggiornata al massimo una volta per intervallo.
Eventi grezzi
Con debounce ({n} ms)
Con throttle ({n} ms)
Visualizzatore
Muoviti sul pad. Le tacche sottili sono eventi grezzi; i punti sono chiamate effettivamente eseguite dopo debounce o throttle.
Ritardo: {n} ms
Pad degli eventi: muovi qui il puntatore o tieni premuto un tasto
Muoviti qui (o dai il focus e tieni premuto un tasto)
La timeline mostra gli ultimi sei secondi; i numeri contano le chiamate in quella finestra.