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.