Detecting idle time in JavaScript elegantly.

Question

Is it possible to detect "idle" time in JavaScript?
My primary use case probably would be to pre-fetch or preload content.

Idle time: Period of user inactivity or without any CPU usage

Answer 1

Just a few thoughts, an avenue or two to explore.

Is it possible to have a function run every 10 seconds, and have that check a "counter" variable? If that's possible, you can have an on mouseover for the page, can you not? If so, use the mouseover event to reset the "counter" variable. If your function is called, and the counter is above the range that you pre-determine, then do your action.

Again, just some thoughts... Hope it helps.

Answer 2

You could probably hack something together by detecting mouse movement on the body of the form and updating a global variable with the last movement time. You'd then need to have an interval timer running that periodically checks the last movement time and does something if it has been sufficiently long since the last mouse movement was detected.

Answer 3

Well you could attach a click or mousemove event to the document body that resets a timer. Have a function that you call at timed intervals that checks if the timer is over a specified time (like 1000 millis) and start your preloading.

Answer 4

Here is a rough jQuery implementation of tvanfosson's idea:

$(document).ready(function(){

   idleTime = 0;

   //Increment the idle time counter every second.
   var idleInterval = setInterval("timerIncrement()", 1000);

   function timerIncrement()
   {
     idleTime++;
     if (idleTime > 2)
     {
       doPreload();
     }
   }

   //Zero the idle timer on mouse movement.
   $(this).mousemove(function(e){
      idleTime = 0;
   });

   function doPreload()
   {
     //Preload images, etc.
   }

})

Answer 5

You could probably detect inactivity on your web page using the mousemove tricks listed, but that won't tell you that the user isn't on another page in another window or tab, or that the user is in Word or Photoshop, or WOW and just isn't looking at your page at this time. Generally I'd just do the prefetch and rely on the client's multi-tasking. If you really need this functionality you do something with an activex control in windows, but it's ugly at best.

Answer 6

Javascript has no way of telling the CPU usage. This would break the sandbox javascript runs inside.

Other than that, hooking the page's onmouseover and onkeydown events would probably work.

You could also set use setTimeout in the onload event to schedule a function to be called after a delay.

// Call aFunction after 1 second
window.setTimeout(aFunction, 1000);

Answer 7

Similar to Iconic's solution above (with jQuery)...

//when the document is loaded
$(function(){

  //create an event handler for the mousemove
  var preLoadTimer;
  $(this).mousemove(function(e){
    //clear prior timeout, if any
    window.clearTimeout(preLoadTimer);

    //create new timeout.
    preLoadTimer = window.setTimeout(doPreLoad, 2000);
  });

});

Answer 8

Idle time implementation using
YUI (http://www.nczonline.net/blog/2009/06/02/detecting-if-the-user-is-idle-with-javascript-and-yui-3/ )
jQuery(http://paulirish.com/2009/jquery-idletimer-plugin/)

Answer 9

For Prototype: http://github.com/saizai/prototype_idle_timer

Answer 10

here's a plugin that listens for keypresses too and has multiple options to hook your functions into, eg. onIdle, onTimeout etc.

http://www.erichynds.com/jquery/a-new-and-improved-jquery-idle-timeout-plugin/

Answer 11

Here is a simple script using JQuery that handles mousemove and keypress. If the time expires, the page reload.

<script type="text/javascript">
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>