Debounce: come ritardare una funzione in JavaScript (esempio JS ES6)

Articolo originale: https://www.freecodecamp.org/news/javascript-debounce-example/

In JavaScript, una funzione antirimbalzo (debounce) assicura che il codice venga attivato solo una volta per ogni input dell'utente. I suggerimenti per le caselle di ricerca, i salvataggi automatici dei campi di testo e l'eliminazione dei clic sul doppio pulsante sono tutti casi d'uso per il antirimbalzo.

In questo tutorial impareremo come creare una funzione antirimbalzo in JavaScript.

Cos'è il rimbalzo?

Il termine rimbalzo deriva dall'elettronica. Quando si preme un pulsante, supponiamo sul telecomando della TV, il segnale viaggia verso il microchip del telecomando così rapidamente che prima che tu riesca a rilasciare il pulsante, rimbalza e il microchip registra il tuo "clic" più volte.

Per evitare ciò, una volta ricevuto un segnale dal pulsante, il microchip interrompe l'elaborazione dei segnali dal pulsante per alcuni microsecondi, intervallo di tempo nel quale per te è fisicamente impossibile premerlo di nuovo.

Debounce in JavaScript

In JavaScript, succede una cosa simile. Vogliamo attivare una funzione, ma solo una volta per caso d'uso.

Diciamo che vogliamo mostrare suggerimenti per una query di ricerca, ma solo dopo che un visitatore ha finito di digitarla.

Oppure vogliamo salvare le modifiche su un modulo, ma solo quando l'utente non sta lavorando attivamente su tali modifiche, poiché ogni "salvataggio" ci costa un viaggio nel database.

E il mio preferito: alcune persone si sono davvero abituate a Windows 95 e ora fanno doppio clic su tutto 😁.

Questa è una semplice implementazione della funzione debounce (CodePen qui):

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

Può essere utilizzato su un input:

<input type="text" onkeyup="processChange()" />

Oppure un pulsante:

<button onclick="processChange()">Click me</button>

O un evento window:

window.addEventListener("scroll", processChange);

E su altri elementi come una semplice funzione JS.

Allora cosa sta succedendo qui? debounce è una funzione speciale che gestisce due attività:

• Assegnazione di un ambito per la variabile timer
• Programmazione dell'attivazione della funzione in un momento specifico

Spieghiamo come funziona nel primo caso d'uso con input di testo.

Quando un visitatore scrive la prima lettera e rilascia il tasto, il primo debounce azzera il timer con clearTimeout(timer). A questo punto, lo step non è necessario in quanto non c'è ancora nulla di programmato. Quindi pianifica la funzione fornita saveInput() da invocare in 300 ms.

Ma diciamo che il visitatore continua a scrivere, quindi ogni rilascio di un tasto attiva nuovamente debounce. Ad ogni chiamata bisogna reimpostare il timer o, in altre parole, annullare i piani precedenti con saveInput()e riprogrammarlo per un nuovo intervallo, altri 300 ms. Questo va avanti finché il visitatore continua a premere i tasti per un tempo sotto i 300 ms.

L'ultima programmazione non verrà cancellata, quindi saveInput() verrà finalmente chiamata.

Il contrario: come ignorare gli eventi successivi

È utile per attivare il salvataggio automatico o visualizzare suggerimenti. Ma che dire del caso d'uso con più clic su di un singolo pulsante? Non vogliamo aspettare l'ultimo clic, ma piuttosto registrare il primo e ignorare il resto ( CodePen qui ).

function debounce_leading(func, timeout = 300){
  let timer;
  return (...args) => {
    if (!timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
    }, timeout);
  };
}

Qui attiviamo la funzione saveInput() alla prima chiamata debounce_leading causata dal primo clic del pulsante. Pianifichiamo la cancellazione del timer ai 300 ms. Ogni successivo clic del pulsante entro quel lasso di tempo avrà già il timer definito e spingerà la cancellazione 300 ms più avanti.

Implementazioni di Debounce nelle librerie

In questo articolo, ti ho mostrato come implementare una funzione di antirimbalzo in JavaScript e come usarla per eliminare i rimbalzi degli eventi attivati ​​dagli elementi del sito web.

Tuttavia, non è necessario utilizzare la propria implementazione di antirimbalzo nei propri progetti se non lo si desidera. Ci sono librerie JS ampiamente utilizzate che contengono già la loro implementazione. Ecco alcuni esempi: