Expand Up @@ -4,48 +4,48 @@ importance: 5
# Debounce decorator
The result of `debounce(f, ms)` decorator is a wrapper that suspends calls to `f` until there's `ms` milliseconds of inactivity (no calls, "cooldown period"), then invokes `f` once with the latest arguments. Il risultato del decorator `debounce(f, ms)` è un wrapper che sospende le chiamate a `f` finché non ci sono `ms` millisecondi di inattività (nessuna chiamata, "periodo di *cooldown*"), quindi invoca `f` una volta, con gli ultimi argomenti.
In other words, `debounce` is like a secretary that accepts "phone calls", and waits until there's `ms` milliseconds of being quiet. And only then it transfers the latest call information to "the boss" (calls the actual `f`). In altre parole, `debounce` è come una segretaria che riceve "telefonate" e aspetta finché non ci sono `ms` di silenzio. Solo allora trasferisce le informazioni sull'ultima chiamata al "capo" (chiama effettivamente `f`).
For instance, we had a function `f` and replaced it with `f = debounce(f, 1000)`. Ad esempio, avevamo una funzione `f` e l'abbiamo sostituita con `f = debounce(f, 1000)`.
Then if the wrapped function is called at 0ms, 200ms and 500ms, and then there are no calls, then the actual `f` will be only called once, at 1500ms. That is: after the cooldown period of 1000ms from the last call. Se la funzione incapsulata viene chiamata a 0 ms, 200 ms e 500 ms, e quindi non ci sono chiamate, la `f` effettiva verrà chiamata solo una volta, a 1500 ms. Cioè dopo il periodo di *cooldown* di 1000 ms dall'ultima chiamata.
...And it will get the arguments of the very last call, other calls are ignored. ... E riceverà gli argomenti dell'ultima chiamata, tutte le altre chiamate vengono ignorate.
Here's the code for it (uses the debounce decorator from the [Lodash library](https://lodash.com/docs/4.17.15#debounce)): Ecco il codice, (usa il *debounce decorator* dalla [Libreria Lodash](https://lodash.com/docs/4.17.15#debounce)):
```js let f = _.debounce(alert, 1000);
f("a"); setTimeout( () => f("b"), 200); setTimeout( () => f("c"), 500); // debounced function waits 1000ms after the last call and then runs: alert("c") // la funzione di debounced attende 1000ms dopo l'ultima chiamata, quini esegue: alert("c") ```
Now a practical example. Let's say, the user types something, and we'd like to send a request to the server when the input is finished. Ora un esempio pratico. Diciamo che l'utente digita qualcosa, e vorremmo inviare una richiesta al server quando l'input è finito.
There's no point in sending the request for every character typed. Instead we'd like to wait, and then process the whole result. Non ha senso inviare la richiesta per ogni carattere digitato. Vorremmo invece aspettare, e poi elaborare l'intero risultato.
In a web-browser, we can setup an event handler -- a function that's called on every change of an input field. Normally, an event handler is called very often, for every typed key. But if we `debounce` it by 1000ms, then it will be only called once, after 1000ms after the last input. In un browser web, possiamo impostare un gestore di eventi -- una funzione che viene chiamata ad ogni modifica di un campo di input. Normalmente, un gestore di eventi viene chiamato molto spesso, per ogni tasto digitato. Ma se utilizziamo un `debounce` di 1000 ms, verrà chiamato solo una volta, dopo 1000 ms dopo l'ultimo input.
```online
In this live example, the handler puts the result into a box below, try it: In questo esempio dal vivo, il gestore inserisce il risultato in una box sottostante, provalo:
[iframe border=1 src="debounce" height=200]
See? The second input calls the debounced function, so its content is processed after 1000ms from the last input. Come vedi, il secondo input chiama la funzione, quindi il suo contenuto viene elaborato dopo 1000 ms dall'ultimo inserimento. ```
So, `debounce` is a great way to process a sequence of events: be it a sequence of key presses, mouse movements or something else. Quindi, `debounce` è un ottimo modo per elaborare una sequenza di eventi: che si tratti di una sequenza di pressioni di tasti, movimenti del mouse o qualsiasi altra cosa.
It waits the given time after the last call, and then runs its function, that can process the result. Aspetta il tempo specificato dopo l'ultima chiamata, quindi esegue la sua funzione, che può elaborare il risultato.
The task is to implement `debounce` decorator. Il compito è implementare il decorator `debounce`.
Hint: that's just a few lines if you think about it :) Suggerimento: sono solo poche righe se ci pensi :)