JavaScript: Detect user activity / inactivity.

This is a short guide on how to detect user activity or inactivity using JavaScript. To do this, we will capture user events such as mouse movements, touch screen presses and keyboard presses.

Logging inactive users out or displaying popups / adverts.

There are a number of reasons why you might want to do this. The three reasons that immediately spring to mind are:

1. You want JavaScript to log the user out after they’ve been inactive for too long. That or you want to warn them that they are about to be logged out.
2. You want to pause a polling Ajax request.
3. There is an advert or a popup that you want to display if the user has been idle for a set period of time.

JavaScript function that detects activity / inactivity.

In the code below, I will be using plain JavaScript as not everyone wants to have to include the entire JQuery library for a small piece of functionality.

Take a look at the following function, which I have heavily commented:

function activityWatcher(){

    //The number of seconds that have passed
    //since the user was active.
    var secondsSinceLastActivity = 0;

    //Five minutes. 60 x 5 = 300 seconds.
    var maxInactivity = (60 * 5);

    //Setup the setInterval method to run
    //every second. 1000 milliseconds = 1 second.
    setInterval(function(){
        secondsSinceLastActivity++;
        console.log(secondsSinceLastActivity + ' seconds since the user was last active');
        //if the user has been inactive or idle for longer
        //then the seconds specified in maxInactivity
        if(secondsSinceLastActivity > maxInactivity){
            console.log('User has been inactive for more than ' + maxInactivity + ' seconds');
            //Redirect them to your logout.php page.
            location.href = 'logout.php';
        }
    }, 1000);

    //The function that will be called whenever a user is active
    function activity(){
        //reset the secondsSinceLastActivity variable
        //back to 0
        secondsSinceLastActivity = 0;
    }

    //An array of DOM events that should be interpreted as
    //user activity.
    var activityEvents = [
        'mousedown', 'mousemove', 'keydown',
        'scroll', 'touchstart'
    ];

    //add these events to the document.
    //register the activity function as the listener parameter.
    activityEvents.forEach(function(eventName) {
        document.addEventListener(eventName, activity, true);
    });


}

activityWatcher();

Code drilldown.

In the function above, we:

1. Created a JavaScript variable called secondsSinceLastActivity. This variable contains the number of seconds that have passed since the user was last active.
2. Using the maxInactivity variable, we set the maximum number of seconds that should pass before we consider the user to be inactive. In the case above, I have set this to 300 seconds, which is 5 minutes. You can obviously change this to suit your own needs.
3. After that, we used the setInterval method to create a counter that runs every second. This counter increments the secondsSinceLastActivity variable and checks to see if the user has been inactive for too long. In the example above, I redirect the user to a page called logout.php. However, you can replace this piece of code to redirect to a different URL or display a popup, etc.
4. We then created a function called activity. This function is called whenever a user carries out an action on the page. In this case, the function simply resets the secondsSinceLastActivity variable back to 0.
5. We created an array containing the names of DOM events that we want to consider as activity. In the code above, we are using: mousedown, mousemove, keydown, scroll and touchstart. These are explained further down.
6. Finally, we looped through the array and added an event listener to the document using the addEventListener() method.

If you run the JavaScript function above, you should see something like this in your browser’s console:

The counter in the screenshot above was reset the first time after I moved my mouse. It reset the second time when I pressed a key on my keyboard.

Activity events.

The code above uses five different types of events to determine user idleness. These are:

• mousedown: Occurs when a key on the mouse is pressed.
• mousemove: Fires when the mouse is moved.
• keydown: This event fires whenever a key on the keyboard is pressed.
• scroll: Occurs when the document is scrolled.
• touchstart: Fires when the user touches a touch screen (mobile device, etc).

Note that these event handlers are applied to the document object, which represents the entire HTML document that has been loaded into the browser.