Cosa sta Debouncing in JavaScript?

Hai mai fatto clic su un pulsante di una pagina web e ti senti come se ci vorva un po 'di troppo tempo per caricare il contenuto. Allo stesso modo, durante la digitazione nella barra di ricerca, la ricerca richiede un breve ritardo per mostrare i risultati. Anche se non l'hai mai sentito, lascia che ti dica che gli sviluppatori hanno usato la funzione Deboa Per ottenere questo ritardo e questo ritardo è molto utile quando si tratta di arrestare le richieste non necessarie al server.

Ad esempio, se hai impostato una funzione sulla finestra Ridimension e ora immagina di chiamare la funzione continuamente mentre ridimensioniamo la nostra finestra. È un modo efficiente per farlo? Naturalmente non perché chiamare continuamente quella funzione specifica non è necessaria e quindi influirebbe sulle prestazioni.

In questo post, parleremo di ciò che sta debouncing in JavaScript e della sua implementazione con alcuni esempi.

Cosa sta Debouncing?

La definizione più semplice di debouncing sarebbe che si tratti di una tecnica di programmazione intesa a limitare la chiamata di una funzione che richiede tempo (più calcoli) frequentemente o solo attiva una funzione quando necessario. Supponiamo che tu sia uno sviluppatore e stai creando una barra di ricerca. Vorresti mostrare suggerimenti solo una volta che l'utente finisce di digitare non su ogni singola tasti. Quindi, usando Debouncing in JavaScript, si può migliorare le prestazioni della loro pagina web.

Come funziona il debouncing? Bene, se lo metto in parole semplici, allora debouncing funziona mettendo un timer "attesa" prima dell'esecuzione di un pezzo di codice specifico. E se, a causa di una certa situazione, viene riesaminato lo stesso processo. Quindi, piuttosto che formare una coda di due stessi eventi, fermiamo il vecchio processo e ci concentriamo solo sull'esecuzione di quello recente. Questo ci salva anche da una situazione di "collo di bottiglia". Per coloro che non hanno familiarità con il "collo di bottiglia", è uno stato che si verifica quando si sta cercando di eliminare più cose sullo schermo rispetto alla potenza di elaborazione del server

Attuazione di debouncing

Possiamo implementare il deboance in JavaScript usando i passaggi indicati di seguito:

• Crea un timer di ritardo all'interno della funzione e impostalo su 0
• Ripristina il timer se la funzione specificata viene nuovamente invocata
• Chiama la funzione di debounce solo quando timeout.

Parte di codifica HTML

Il primo passo nell'implementazione della deboa in JavaScript richiederà un elemento HTML su cui assegneremo l'evento click.

Innanzitutto, crea un elemento pulsante in HTML:

Cliccami

Il tag di script viene utilizzato per fare riferimento al file in cui scriveremo il nostro codice JavaScript che è codice.js. Abbiamo anche usato il id attributo che useremo per fare riferimento all'elemento pulsante di html in javascript.

Ora che abbiamo finito con la parte di codifica HTML, implementiamo la funzione di debounce in JavaScript.

Parte di codifica JavaScript

La funzione per l'implementazione della tecnica di debounce andrebbe così:

// Ottieni riferimento al pulsante
var mybtn = documento.getElementById ("MyBTN");
// Funzione di deboance definita
const debounce = (myfunc, delaytime) =>
Let DeBouncetimer;
return function ()
const context = this;
const args = argomenti;
ClearTimeout (DeBounCetimer);
debouncetimer = setTimeout (() => myFunc.applicare (contesto, args), ritardo);


// Aggiungi un ascoltatore di eventi al pulsante
mybtn.addEventListener ('click', debounce (function ()
// Avviso sarà visto dopo due secondi di tempo
Avviso ("Hello World dopo 2 secondi");
, 2000));

Nel codice sopra, in primo luogo, otteniamo il riferimento del pulsante specificato in HTML e aggiungiamo un evento di clic su questo pulsante. Ogni pulsante Click invocherebbe la funzione di deboance.

Nel Deboa funzione, stiamo prendendo due argomenti, il primo è la funzione e il secondo è il tempo di ritardo o il tempo di out. Quindi abbiamo inizializzato il Debouncetimer che seguirà il periodo di ritardo.

Quando un utente fa clic sul pulsante una volta, la funzione di debounce verrà chiamata dopo il ritardo.

Pertanto, se l'utente fa clic sul pulsante e quindi fa clic sul pulsante prima della fine del ritardo, il timer si ripristina e il ritardo iniziale verrà cancellato.

Tutta questa funzionalità è raggiunta dalla funzione Cleartimeout ().

Vediamo l'output:

Possiamo vedere che quando stiamo facendo clic sul pulsante, ripetutamente non vediamo alcun output. Tuttavia, quando abbiamo fatto clic sul pulsante l'ultima volta e l'abbiamo lasciato, abbiamo visto il messaggio di avviso dopo due secondi. Quindi, possiamo concluderlo Ogni clic chiama la funzione di deboa e ripristina il timer che ritarda la chiamata.

Conclusione

Debouncing è una tecnica di programmazione utilizzata dagli sviluppatori per limitare il numero di chiamate a un evento o innescare una funzione solo quando necessario o per un solo caso d'uso. La tecnica di debouncing viene applicata in una funzione che richiede tempo che ha molti calcoli, quindi evitiamo la chiamata inutile di quella funzione. Per essere specifico, il debouncing può essere applicato nelle barre di ricerca, barre di testo suggestive, pagine Web di caricamento del contenuto E.G Facebook, Instagram e così via.

In questo post, abbiamo discusso di cosa sia Debouncing in JavaScript e abbiamo dato un'occhiata al suo lavoro e all'implementazione in JavaScript.