Fire Event When User is Idle

See the two commented lines below, that is where you can insert code for things to do when the user goes idle, and when the user comes back. Set the idle period on the third line, 1000 = 1 second.

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

    $(document).ready(function () {
    
        $('*').bind('mousemove keydown scroll', function () {
        
            clearTimeout(idleTimer);
                    
            if (idleState == true) { 
                
                // Reactivated event
                $("body").append("<p>Welcome Back.</p>");            
            }
            
            idleState = false;
            
            idleTimer = setTimeout(function () { 
                
                // Idle Event
                $("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");

                idleState = true; }, idleWait);
        });
        
        $("body").trigger("mousemove");
    
    });
}) (jQuery)

This works by using a setTimeout function to fire at the end of the specified seconds. If basically anything happens during that time (the mouse moves, the page is scrolled, or a key is pressed) the timeout period is reset.

Reference URL

Comments

  1. User Avatar
    drivel
    Permalink to comment#

    Very cool idea, but in Google Chrome v4.0.302.2 the demo just loops “You’ve been idle for 2 seconds.” and “Welcome Back.” every 10 seconds or so.

  2. User Avatar
    Benjamin Mayo
    Permalink to comment#

    What OS? I’m running the latest version on Linux and Windows and the code’s running as it should.

    • User Avatar
      drivel
      Permalink to comment#

      I’m on Windows Vista. If I move my mouse it correctly assumes I’m back, but if I don’t touch anything it will incorrectly assume I’m back after about 10 seconds.

    • User Avatar
      Benjamin Mayo
      Permalink to comment#

      Odd. Unfortunately, I can’t test Vista here.

      Does the 10second gap increase if you increase idleWait?

  3. User Avatar
    elundmark
    Permalink to comment#

    Works fine for me! Tried it on FF3.6 and Chrome 4.0.249.43 on Ubuntu 9.10.
    Have a look @ jsbin.com/uxoya

  4. User Avatar
    Kaziko
    Permalink to comment#

    Works fine on Chrome 4.0.249 (Mac OSX Snow Leo)

  5. User Avatar
    Benjamin Mayo
    Permalink to comment#

    Just incase people are wonderiing, this code has two main purposes; having the ability to execute CPU-heavy tasks when the user is not active, or vice-versa;
    save processing by disabling expensive script until the user returns.

    Live examples include Facebook, who stop AJAX page updates when idle, and the web version of GTalk (integrated into email), which uses the state to show user status to thers.

  6. User Avatar
    Erik
    Permalink to comment#

    Doesnt work with IE8 and Chrome on Windows7, it does work with FireFox.

  7. User Avatar
    Diogo

    Can someone help me to modify that script so that on his Iddle state, it loads a page passing something with get method, like “test.php?name=johndoe” ???

  8. User Avatar
    Benzine78
    Permalink to comment#

    Cool snippet.
    You should also add click events to the bind event.

  9. User Avatar
    Jeff Frazier
    Permalink to comment#

    Thanks! I used this on http://mixedminds.com to hide my “scroll-to-top” button when the used is idle, so the button won’t obstruct content on mobile devices. As soon as the user is “active” again, the button shows, as long as the window scrollTop() > 150.

  10. User Avatar
    Mike Deitrick
    Permalink to comment#

    How would you go about keeping track of the actual seconds that have passed by (as opposed to always having a message appended to the HTML document with 2 seconds)? I attempted to use the setInterval() function, but it returned some really odd values. Any ideas? Thank you in advance.

  11. User Avatar
    nodsdorf
    Permalink to comment#

    Thank you,

    I modified this slightly to logout inactive users by using alert when the user clicks okay they are redirected to the logout page subsequently then redirected to the login page.

    idleTimer = null;
    idleState = false;
    idleWait = 240000;
    (function ($) { $(document).ready(function () {
    $('*').bind('mousemove keydown scroll', function () {
    clearTimeout(idleTimer);
    if (idleState == true) {
    // Reactivated event
    window.location.replace("logout.php");
    }
    idleState = false;
    idleTimer = setTimeout(function () {
    // Idle Event
    alert("You've been idle for " + idleWait/60000 + " mins.");
    idleState = true; }, idleWait);
    });
    $("body").trigger("mousemove");
    });
    })

    Thank you ,
    Nods

  12. User Avatar
    Vidula J
    Permalink to comment#

    Found a working snippet and included in JQuery Mobile app and it’s working and thanks for the article.

  13. User Avatar
    sandip ghoshal
    Permalink to comment#

    is there a way to detect if the user has moved to another window if the browser window is not active or the user’s not on it its open bout not in focus then it will run a function. Thank you

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag