PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Fire Event When User is Idle

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

Subscribe to The Thread

  1. 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. What OS? I’m running the latest version on Linux and Windows and the code’s running as it should.

    • 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.

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

      Does the 10second gap increase if you increase idleWait?

  3. 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. Kaziko

    Works fine on Chrome 4.0.249 (Mac OSX Snow Leo)

  5. Benjamin Mayo

    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. Doesnt work with IE8 and Chrome on Windows7, it does work with FireFox.

  7. 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. Cool snippet.
    You should also add click events to the bind event.

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~