Debounce in Javascript

Mattepuffo's logo
Debounce in Javascript

Debounce in Javascript

Programmazione, Javascript - AJAX

Supponiamo di avere un bottone che invia i dati di un form, e che vogliamo impedire che l'utente ci clicchi troppe volte in maniera consecutiva.

In Javascript abbiamo almeno due possibilità:

  • bloccare la UI fino a che l'operazione non è terminata
  • usare il debounce

In questo articolo vediamo un esempio di questa "tecnica".

Ecco un esempio:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>TEST</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

        <style></style>
        <script>
            function debounce(func, timeout = 3000) {
                let timer;
                return (...args) => {
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        func.apply(this, args);
                    }, timeout);
                };
            }

            function invia() {
                console.log('Invvio dati!');
            }

            const eseguiDebounce = debounce(() => invia());
        </script>
    </head>

    <body>
        <button onclick="eseguiDebounce()">Invia</button>
    </body>
</html>

Se provate a cliccare ripetutamente sul bottone, vedrete che il risultato apparirà in console una sola volta.

Più facile vederlo in azione che spiegarlo.

Ovviamente eseguiDebounce potete richiamarlo dove volete: su una input, in caricamento pagina, sullo scroll della pagina, ecc.

Enjoy!

 

Condividi

Commentami!