Differenza tra il throttling e il debouncing di una funzione

Qualcuno può darmi una spiegazione in parole semplici sulla differenza tra la limitazione e il debouncing di una funzione ai fini della limitazione della velocità.

A me sembra che entrambi facciano la stessa cosa. Ho controllato questi due blog per scoprire:

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Per dirla in termini semplici:

  • Throttling ritarderà l’esecuzione di una funzione. Ridurrà le notifiche di un evento che si triggers più volte.
  • Il debouncing raggruppa una serie di chiamate sequenziali a una funzione in un’unica chiamata a quella funzione. Assicura che venga effettuata una notifica per un evento che si triggers più volte.

Puoi vedere visivamente la differenza qui

Se hai una funzione che viene chiamata molto, ad esempio quando si verifica un evento di ridimensionamento o spostamento del mouse, può essere chiamato un sacco di volte. Se non si desidera questo comportamento, è ansible eseguire il Throttle in modo che la funzione venga richiamata a intervalli regolari. Il debouncing significherà che viene chiamato alla fine (o all’inizio) di un gruppo di eventi.

Personalmente ho trovato il rimbalzo più difficile da comprendere rispetto alla valvola a farfalla .

Poiché entrambe le funzioni ti aiutano a posticipare e ridurre la velocità di alcune esecuzioni. Supponendo che tu stia chiamando ripetutamente funzioni decorate restituite da throttle / debounce …

  • Throttle : la funzione originale deve essere chiamata al massimo una volta per periodo specificato.
  • Rimbalzo : la funzione originale viene chiamata dopo che il chiamante smette di chiamare la funzione decorata dopo un periodo specificato .

Ho trovato fondamentale l’ultima parte del rimbalzo per capire l’objective che sta cercando di raggiungere. Ho anche trovato una vecchia versione dell’implementazione di _.debounce che aiuta la comprensione (per gentile concessione di https://davidwalsh.name/function-debounce ).

// Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. _.debounce = function(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; 

Una metafora inverosimile, ma forse potrebbe anche aiutare.

Hai un amico di nome Chatty a cui piace parlare con te tramite chat. Supponendo che quando parla interrompa un nuovo messaggio ogni 5 secondi, mentre l’icona dell’applicazione IM si muove su e giù, puoi …

  • Approccio ingenuo : controlla ogni messaggio finché arriva. Quando l’icona della tua app rimbalza, controlla. Non è il modo più efficace, ma sei sempre aggiornato.
  • Approccio acceleratore : controlli una volta ogni 5 minuti (quando ce ne sono di nuovi). Quando arriva un nuovo messaggio, se hai controllato in qualsiasi momento negli ultimi 5 minuti, ignoralo. Risparmia tempo con questo approccio, mentre sei ancora nel ciclo.
  • Approccio antirimbalzo : conosci Chatty, rompe un’intera storia in pezzi, li manda in un messaggio dopo l’altro. Aspetti che Chatty finisca l’intera storia: se smette di inviare messaggi per 5 minuti, presumi che abbia finito, ora controlli tutto.

Il rimbalzo consente di gestire la frequenza delle chiamate che una funzione può ricevere. Combina più chiamate che si verificano su una determinata funzione, in modo che le chiamate ripetute che si verificano prima della scadenza di una specifica durata vengono ignorate. Fondamentalmente il debouncing garantisce che venga inviato esattamente un segnale per un evento che potrebbe accadere più volte.

La limitazione limita la frequenza delle chiamate che una funzione riceve su un intervallo di tempo fisso. Viene utilizzato per garantire che la funzione di destinazione non venga invocata più spesso del ritardo specificato. La limitazione è la riduzione del tasso di un evento ricorrente.

La limitazione impone un numero massimo di volte in cui una funzione può essere chiamata nel tempo. Come in “Esegui questa funzione al massimo una volta ogni 100 millisecondi”.

Il debouncing impone che una funzione non venga richiamata fino a quando non viene chiamata una certa quantità di tempo. Come in “Esegui questa funzione solo se sono passati 100 millisecondi senza che venga chiamato”.

arbitro

In parole povere:

Il debouncing impedirà l’esecuzione di una funzione mentre viene ancora chiamata frequentemente. Una funzione di rimbalzo verrà eseguita solo dopo che è stato determinato che non viene più chiamato, a quel punto verrà eseguito esattamente una volta. Esempi pratici di debouncing:

  • Salvataggio automatico o convalida del contenuto di un campo di testo se l’utente “ha smesso di digitare”: l’operazione verrà eseguita una sola volta, DOPO che è stato determinato che l’utente non sta più digitando (non sta più premendo i tasti).

  • Registrazione in cui gli utenti riposano il mouse: l’utente non sposta più il mouse, quindi è ansible registrare la posizione (ultima).

Throttling impedirà semplicemente l’esecuzione di una funzione se è stata eseguita di recente, indipendentemente dalla frequenza della chiamata. Esempi pratici di regolazione:

  • Le implementazioni di v-sync si basano sulla limitazione: lo schermo verrà disegnato solo se sono trascorsi 16 ms dall’ultima visualizzazione della schermata. Indipendentemente dal numero di volte in cui viene chiamata la funzionalità di aggiornamento dello schermo, verrà eseguita al massimo una volta ogni 16 ms.

la biblioteca di lodash suggerisce il seguente articolo https://css-tricks.com/debouncing-throttling-explained-examples/ che spiega dettagliatamente la differenza tra Debounce e Throttle e la loro origine

throtle è solo un wrapper attorno a debounce che fa sì che il debounce invochi la function passata in un certo periodo di tempo, se il debounce ritarda una chiamata di funzione su un periodo di tempo che è maggiore di quello specificato in throtle .

Spiegazione per caso d’uso:

Barra di ricerca: non si desidera eseguire la ricerca ogni volta che l’utente preme il tasto? Vuoi effettuare una ricerca quando l’utente ha smesso di digitare per 1 secondo. Usa debounce 1 sec alla pressione dei tasti.

Gioco di tiro: la pistola impiega 1 secondo tra un colpo e l’altro, ma l’utente fa clic più volte sul mouse. Usa il throttle al clic del mouse.

In caso di inversione dei ruoli :

Throttling 1 sec sulla barra di ricerca : se gli utenti digitano “Testo lungo …” in 10 secondi, dovrebbe chiamare la ricerca circa 10 volte. La prima ricerca verrà chiamata quando viene premuto il primo tasto ‘L’.

Rimbalzo della pistola per 1 secondo – Quando l’utente vede un nemico, fa clic sul mouse, ma non sparerà. Farà nuovamente clic più volte in quel secondo ma non scatterà. Vedrà se ha ancora proiettili, in quel momento (1 secondo dopo l’ultimo clic) la pistola scatterà automaticamente.