A volte, desideriamo ricaricare automaticamente una pagina dopo un determinato periodo di inattività sulla nostra pagina web.
In questo articolo, vedremo come ricaricare automaticamente una pagina dopo un determinato periodo di inattività con JavaScript e jQyery.
Registra il tempo in cui c'è attività
Possiamo monitorare gli eventi mousemove e keypress per monitorare rispettivamente le attività del mouse e della tastiera.
Quindi possiamo registrare l'ora in cui l'utente ha utilizzato l'ultima volta la pagina nel listener degli eventi.
Poi possiamo usare quel tempo per calcolare quanto tempo fa l'utente ha utilizzato la pagina l'ultima volta.
Codice JavaScript
Per fare ciò in JavaScript scriviamo:
Abbiamo la variabile time che ha il timestamp in millisecondi come valore iniziale.
Quindi abbiamo il listener degli eventi setActivityTime che utilizziamo per impostare l'ora in cui l'utente ha utilizzato l'ultima volta la pagina.
Monitoriamo gli eventi mousemove e keypress e utilizziamo setActivityTime come listener degli eventi per registrare l'ultima interazione dell'utente con la pagina.
Poi abbiamo la funzione di aggiornamento (refresh) che controlla quando l'utente ha interagito l'ultima volta con la pagina.
Se il tempo è superiore a 60 secondi (indicato con 60000), chiamiamo location.reload per ricaricare la pagina.
In caso contrario, richiameremo refresh per ricontrollare tra 10 secondi.
Ora la pagina dovrebbe aggiornarsi se non vi è alcuna interazione per più di 60 secondi.
Codice jQuery
Il codice jQuery, ovviamente è molto simile a quello JavaScript ma con le opportune semplificazioni:
Nel primo rigo è presente la variabile time a cui assegnamo come valore iniziale il timestamp in millisecondi.
Successivamente abbiamo il listener degli eventi bind che monitora gli eventi mousemove e keypress e utilizziamo per registrare l'ora in cui l'utente ha utilizzato l'ultima volta la pagina.
Poi abbiamo la funzione di aggiornamento, denominata refresh, che verifica quando l'utente ha interagito l'ultima volta con la pagina.
Se sono trascorsi più di 60 secondi (indicato in millisecondi con il valore 60000), chiamiamo window.location.reload per ricaricare la pagina.
In caso contrario, richiameremo la funzione refresh per effettuare nuovamente il contro dopo 10 secondi (indicato sempre in millisecondi).
A questo punto se non vi è alcuna interazione da parte dell'utente per più di 60 secondi la pagina dovrebbe aggiornarsi automaticamente.
Rapido e semplice!
Grazie a questo script, possiamo registrare l'ultima ora in cui l'utente ha interagito con una pagina e quindi possiamo controllare quanto tempo fa è avvenuta l'ultima attività della pagina e aggiornarla in base al confronto del tempo.
Spero che tu abbia trovato molto utile questo articolo.
Se sei interessato ad una consulenza per lo sviluppo di un sito internet puoi contattare la web agency di Bari Interno15