Differenza tra limitazione e rimbalzo di una funzione

Qualcuno può darmi una spiegazione in parole semplici sulla differenza tra limitazione e rimbalzo di una funzione a fini di limitazione della frequenza.

Per me entrambi sembrano fare 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:

• La limitazione ritarderà l'esecuzione di una funzione. Ridurrà le notifiche di un evento che si attiva più volte.
• Il debounc raggrupperà una serie di chiamate sequenziali a una funzione in una singola chiamata a quella funzione. Assicura che venga effettuata una notifica per un evento che si attiva 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 chiamata molte volte. Se non si desidera questo comportamento, è possibile limitarlo in modo che la funzione venga chiamata a intervalli regolari. Debouncerà significa che viene chiamato alla fine (o all'inizio) di un mucchio di eventi.

Personalmente ho trovato il rimbalzo più difficile da comprendere rispetto all'acceleratore .

Poiché entrambe le funzioni ti aiutano a posticipare e ridurre il tasso di esecuzione. Supponendo che tu stia chiamando ripetutamente le funzioni decorate restituite da acceleratore / rimbalzo ...

• Acceleratore : la funzione originale può essere richiamata al massimo una volta per periodo specificato.
• Debounce : la funzione originale può essere chiamata dopo che il chiamante ha smesso di chiamare la funzione decorata dopo un periodo specificato .

Ho trovato l'ultima parte del rimbalzo cruciale per capire l'obiettivo che sta cercando di raggiungere. Ho anche scoperto che una vecchia versione dell'implementazione di _.debounce 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 messaggistica istantanea. Supponendo che quando parla invii un nuovo messaggio ogni 5 secondi, mentre l'icona dell'applicazione IM rimbalza su e giù, puoi prendere il ...

• Approccio ingenuo : controlla ogni messaggio finché arriva. Quando l'icona dell'app rimbalza, seleziona. 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 il tuo tempo con questo approccio, mentre sei ancora nel giro.
• Approccio di rimbalzo : conosci Chatty, suddivide un'intera storia in pezzi, li invia in un messaggio dopo l'altro. Aspetti che Chatty finisca tutta la storia: se smette di inviare messaggi per 5 minuti, supponi che abbia finito, ora controlli tutto.

differenze

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

Spiegazione per caso d'uso :

• Barra di ricerca- Non vuoi cercare ogni volta che l'utente preme il tasto? Vuoi cercare quando l'utente ha smesso di digitare per 1 secondo. Utilizzare debounce1 secondo alla pressione del tasto.

• Gioco di tiro: la pistola impiega 1 secondo di tempo tra ogni colpo, ma l'utente fa clic più volte con il mouse. Usa throttleal clic del mouse.

Invertire i loro ruoli :

• Limitazione di 1 secondo sulla barra di ricerca : se gli utenti digitano abcdefghijcon ogni carattere in 0.6 sec. Quindi l'acceleratore si attiverà alla prima apressione. Ignorerà ogni pressione per i successivi 1 secondo, ovvero ba .6 secondi verrà ignorato. Quindi ca 1,2 secondi si innescherà di nuovo, ripristinando nuovamente il tempo. Quindi dverrà ignorato e everrà attivato.

• Debouncing pistola per 1 secondo - Quando l'utente vede un nemico, fa clic con il mouse, ma non sparerà. Farebbe di nuovo clic più volte in quel secondo ma non sparerà. Vedrà se ha ancora proiettili, in quel momento (1 secondo dopo l'ultimo clic) la pistola sparerà automaticamente.

La limitazione applica un numero massimo di volte che una funzione può essere richiamata nel tempo. Come in "eseguire questa funzione al massimo una volta ogni 100 millisecondi".

Debouncing impone che una funzione non possa essere richiamata fino a quando non è trascorso un certo periodo di tempo senza che sia stata chiamata. Come in "eseguire questa funzione solo se sono trascorsi 100 millisecondi senza che sia stata chiamata."

arbitro

Acceleratore (1 secondo): Ciao, sono un robot. Fintanto che continuerai a suonarmi, continuerò a parlarti, ma dopo esattamente 1 secondo ciascuno. Se mi invii un ping per una risposta prima che sia trascorso un secondo, ti risponderò comunque a intervalli esattamente di 1 secondo. In altre parole, adoro rispondere a intervalli esatti.

Debounce (1 sec): Ciao, sono quel cugino del robot ^^. Fintanto che continui a farmi il ping, rimarrò in silenzio perché mi piace rispondere solo dopo che è trascorso 1 secondo dall'ultima volta che mi hai eseguito il ping . Non lo so, se è perché ho un problema di atteggiamento o perché non mi piace interrompere le persone. In altre parole, se continui a chiedermi risposte prima che sia trascorso 1 secondo dall'ultima tua chiamata, non otterrai mai una risposta. Sì sì ... vai avanti! chiamami maleducato.

Acceleratore (10 min): sono un registratore automatico. Invio registri di sistema al nostro server back-end, dopo un intervallo regolare di 10 minuti.

Debounce (10 sec): Ciao, non sono cugino di quel registratore. (Non tutti i debouncer sono collegati a un throttler in questo mondo immaginario). Lavoro come cameriere in un ristorante vicino. Dovrei farti sapere che finché continuerai ad aggiungere roba al tuo ordine, non andrò in cucina per l'esecuzione del tuo ordine. Solo dopo che sono trascorsi 10 secondi dall'ultima modifica del tuo ordine, assumerò che tu abbia terminato il tuo ordine. Solo allora eseguirò il tuo ordine in cucina.

Demo interessanti: https://css-tricks.com/debouncing-throttling-explained-examples/

Crediti per l'analogia del cameriere: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Il debouncing 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 un determinato periodo di tempo vengano ignorate. In sostanza, il debounc garantisce che venga inviato esattamente un segnale per un evento che potrebbe verificarsi più volte.

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

È semplice.

Fanno la stessa identica cosa (limitazione della velocità) tranne quando viene chiamato l' acceleratore che farà scattare periodicamente la funzione di avvolgimento e il rimbalzo no. Debounce solo (cerca di) chiamare la tua funzione una volta alla fine.

Esempio : se stai scorrendo, l'acceleratore chiamerà lentamente la tua funzione mentre scorri (ogni X millisecondi). Debounce attenderà fino al termine dello scorrimento per chiamare la funzione.

In parole povere:

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

• Salvataggio automatico o convalida del contenuto di un campo di testo se l'utente "smette di digitare": l'operazione verrà eseguita una sola volta, DOPO che è stato stabilito che l'utente non sta più digitando (non premendo più i tasti).

• Registrazione in cui gli utenti appoggiano il mouse: l'utente non sta più spostando il mouse, quindi è possibile registrare la (ultima) posizione.

La limitazione impedisce semplicemente l'esecuzione di una funzione se è stata eseguita di recente, indipendentemente dalla frequenza di chiamata. Esempi pratici di limitazione:

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

Un'analogia della vita reale che personalmente mi aiuta a ricordare:

• debounce = una conversazione . aspetti che l'altra persona finisca di parlare prima di rispondere.
• throttle = un bit di batteria . suoni solo note su un semplice bit di batteria 4/4.

Casi d'uso per il rimbalzo :

• Digitando. Vuoi fare qualcosa dopo che l'utente ha smesso di digitare. Quindi, attendere 1 secondo dopo l'ultima sequenza di tasti ha senso. Ogni sequenza di tasti riavvia l'attesa.
• Animazione. Vuoi ridurre un elemento dopo che l'utente ha smesso di passarci sopra. Il mancato utilizzo del debounce potrebbe causare un'animazione errata a causa dello spostamento involontario del cursore tra le zone "calda" e "fredda".

Casi d'uso per l' acceleratore :

• Scorrimento. Vuoi reagire allo scorrimento ma limitare la quantità di calcoli effettuati, quindi fare qualcosa ogni 100 ms è sufficiente per evitare potenziali ritardi.
• Mossa del mouse. Come lo scorrimento ma per lo spostamento del mouse.
• Chiamate API Si desidera eseguire una chiamata API su determinati eventi dell'interfaccia utente ma si desidera limitare il numero di chiamate API effettuate per non sovraccaricare il server.

throtle è solo un wrapper per il debounce che fa passare il debounce alla chiamata functionin un certo periodo di tempo, se il debounce ritarda una chiamata di funzione in un periodo di tempo che è più grande di quanto specificato in throttle .

la Biblioteca lodash suggerisce il seguente articolo https://css-tricks.com/debouncing-throttling-explained-examples/ che ha indicato spiegare la differenza tra Debouncee il Throttlee la loro origine

throttling

La limitazione applica un numero massimo di volte in cui una funzione può essere chiamata straordinari. Come in "eseguire questa funzione al massimo una volta ogni 100 millisecondi". Dire in circostanze normali che chiamereste questa funzione 1.000 volte in 10 secondi. Se lo rallenti a una sola volta per 100 millisecondi, eseguirà tale funzione al massimo 100 volte

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

debouncing

Debouncing impone che una funzione non possa essere richiamata fino a quando non è trascorso un certo periodo di tempo senza che sia stata chiamata. Come in "eseguire questa funzione solo se sono trascorsi 100 millisecondi senza che sia stata chiamata."

Forse una funzione viene chiamata 1.000 volte in un rapido scoppio, dispersa per 3 secondi, quindi smette di essere chiamata. Se l'hai rimbalzato a 100 millisecondi, la funzione si attiverà una sola volta, a 3,1 secondi, al termine dell'esplosione. Ogni volta che la funzione viene chiamata durante il burst, reimposta il timer di debouncing

fonte: - acceleratore e rimbalzo

Supponiamo di avere una funzione di callback "cb" da chiamare sull'evento "E". Lascia che "E" venga attivato 1000 volte in 1 secondo, quindi ci sarebbero 1000 chiamate a "cb". Questa è 1 chiamata / ms. Per ottimizzare possiamo usare:

• Limitazione : con una limitazione di (100 ms), "cb" verrebbe chiamato su [100 ms, 200 ms, 300 ms, ... 1000 ms]. Questa è 1 chiamata / 100 ms. Qui 1000 chiamate a "cb" ottimizzate per 10 chiamate.
• Debouncing : con il debouncing di (100ms), "cb" verrebbe chiamato una sola volta su [1100th sec]. Sono 100 ms dopo l'ultimo trigger di "E" che è avvenuto in [1000 ms]. Qui 1000 chiamate a "cb" ottimizzate per 1 chiamata.

Per quanto ho capito, in termini semplici Limitazione - simile alla chiamata setInterval (callback) per un certo numero di volte, ovvero chiamata la stessa funzione per un certo numero di volte nel tempo in cui si verifica l'evento e ... Debouncing - simile alla chiamata setTImeout (callbackForApi) o chiamando una funzione dopo che è trascorso un certo tempo al verificarsi dell'evento. Questo link può essere utile- https://css-tricks.com/the-difference-between-throttling-and-debouncing/