There are a few cases where you want to know if the user is idle. Namely:
- You want to preload more assets
- You want to grab their attention to pull them back
- You want close their banking session after 5 minutes of inactivity. (Jerk!)
- You want the site to sneak off the screen and see if they notice ;-)
Nick Zakas wrote a script for YUI3 to handle these cases. His writeup has a great description of the architecture approach he took to the script.
In my jQuery adaptation, I did a few different things:
- Leveraged event namespaces for easy unbinding
- Considered mousewheel as activity, in addition to keyboard and mouse movement.
- Gave it a bit more jQuery-ish of an API
To use:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Get the source on github (4.6k unminified) View the demo
Note: If you want to change the timeout interval, you’ll have to destroy the existing timer first.
1 2 3 4 5 |
|
You can get the latest code, naturally, on github.
Why would you want this? Lets say you want ..
- One Timer to restore the forms, messages boxes, etc.
- Another Timer of a different length timeout to notify about expiration sessions.
1 2 3 4 5 6 |
|
Notice this new API is on $.fn.idleTimer, as in it works on a jQuery collection instead of just the jQuery global object.
If you’re using this along with the old $.idleTimer api, you should not do $(document).idleTimer(...)
All these element-bound timers will only watch for events inside of them. You may just want to watch page-level activity, in which case you may set up your timers on document
, document.documentElement
, and document.body
. Those will allow three separate timers that will catch all page activity.
Again, check out the demo or view the source on github. :)