jQuery: monitorare i periodi di inattività degli utenti sulle pagine

Short link

Il concetto di attività dell'utente su una pagina può riferirsi a diversi eventi attivati ogni qualvolta l'utente interagisce con la pagina. Quando l'utente non compie nessuna azione sulla pagina si può dire che l'utente è inattivo. Con jQuery possiamo verificare se l'utente è inattivo per un certo periodo di tempo. Vediamo come.

Il seguente codice associa un timer agli eventi mousemove, keydown e scroll e verifica che l'utente li attivi o meno:


(function( $ ) {

    var idleTimer = null;
    var idleState = false;
    var idleWait = 2000;

    $( document ).ready(function () {

        $( "*" ).on( "mousemove keydown scroll", function () {

            clearTimeout( idleTimer );

            if ( idleState == true ) { 

                
                $( "body" ).append( '<p>Bentornato.</p>' );
            }

            idleState = false;

            idleTimer = setTimeout(function () { 

                
                $( "body" ).append( '<p>Sei stato inattivo per ' + idleWait/1000 + ' secondi.</p>' );

                idleState = true; }, idleWait);
        });

        $( "body" ).trigger( "mousemove" );

    });
})( jQuery );

Una volta perfezionato questo codice lo si può applicare a molti casi d'uso dell'interazione utente e della GUI del sito.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.