How to detect idle time in JavaScript

Question

Is it possible to detect "idle" time in JavaScript?

My primary use case probably would be to pre-fetch or preload content.

I define idle time as a period of user inactivity or without any CPU usage

Answer 1

Here is a simple script using jQuery that handles mousemove and keypress events. If the time expires, the page reloads.

<script type="text/javascript">     var idleTime = 0;     $(document).ready(function () {         // Increment the idle time counter every minute.         var idleInterval = setInterval(timerIncrement, 60000); // 1 minute          // Zero the idle timer on mouse movement.         $(this).mousemove(function (e) {             idleTime = 0;         });         $(this).keypress(function (e) {             idleTime = 0;         });     });      function timerIncrement() {         idleTime = idleTime + 1;         if (idleTime > 19) { // 20 minutes             window.location.reload();         }     } </script> 

Answer 2

Without using jQuery, only vanilla JavaScript:

var inactivityTime = function () {     var time;     window.onload = resetTimer;     // DOM Events     document.onmousemove = resetTimer;     document.onkeydown = resetTimer;      function logout() {         alert("You are now logged out.")         //location.href = 'logout.html'     }      function resetTimer() {         clearTimeout(time);         time = setTimeout(logout, 3000)         // 1000 milliseconds = 1 second     } }; 

And initialise the function where you need it (for example: onPageLoad).

window.onload = function() {   inactivityTime(); } 

You can add more DOM events if you need to. Most used are:

document.onload = resetTimer; document.onmousemove = resetTimer; document.onmousedown = resetTimer; // touchscreen presses document.ontouchstart = resetTimer; document.onclick = resetTimer;     // touchpad clicks document.onkeydown = resetTimer;   // onkeypress is deprectaed document.addEventListener('scroll', resetTimer, true); // improved; see comments 

Or register desired events using an array

window.addEventListener('load', resetTimer, true); var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart']; events.forEach(function(name) {  document.addEventListener(name, resetTimer, true); }); 

DOM Events list: http://www.w3schools.com/jsref/dom_obj_event.asp

Remember to use window, or document according your needs. Here you can see the differences between them: What is the difference between window, screen, and document in JavaScript?

Code Updated with @frank-conijn and @daxchen improve: window.onscroll will not fire if scrolling is inside a scrollable element, because scroll events don't bubble. In window.addEventListener('scroll', resetTimer, true), the third argument tells the listener to catch the event during the capture phase instead of the bubble phase.