How to Detect Inactivity or Idle time in JavaScript?

If you are working on a web application where you want to check for user inactivity or user idle time using JavaScript, and if the user is inactive then reload the page or show some message to the user, then this article will help you.

Here, I have multiple solutions for you to check for user inactivity or see if the user is idle and then perform some action. The action can be anything, redirect the user to some other page, log the user out, or simply show some message to the user.

In the code examples shared below, you would be able to customize your idle time value, as the period of user inactivity, and if the user is inactive for that duration, our script will execute some operation.

jQuery Solution

If you use jQuery in your website, then you can use the jQuery solution to implement this.

var idleTime = 0;
$(document).ready(function () {
    // Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    // Zero the idle timer on any action.
    $(this).bind('mousemove keydown scroll click', function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime++;
    // Idle time = 10 minutes
    if (idleTime > 9) 
    {
        // do something like redirect to some page or reload
        window.location.reload();
    }
}

In the code above, we have taken care of the following events:

1. mousemove

2. keydown

3. scroll

4. click

If you want to include more events in this list, you can easily add more events here.

On line number 18, we have added code to reload the same page, you can add your own action there. You can log the user out, show some popup message, or just reload the same page as we have done.

JavaScript solution (without jQuery)

If you don't use jQuery in your website, then you can also implement this solution in vanilla JS or pure JavaScript.

function idleLogout() {
    var t;
    window.onload = resetTimer;
    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;    // catches touchscreen presses as well
    window.ontouchstart = resetTimer;   // catches touchscreen swipes as well
    window.ontouchmove = resetTimer;    // required by some devices
    window.onclick = resetTimer;        // catches touchpad clicks as well
    window.onkeydown = resetTimer;
    window.addEventListener('scroll', resetTimer, true); // improved; see comments

    function doSomething() {
        // show some message, reload the page or anything
        // e.g. window.location.href = 'logout.php';
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(doSomething, 10000);  // time is in milliseconds
    }
}

idleLogout();

In the code above, we have handled a lot of events like, mousemove, mousedown, touch presses, click, keydown, scroll, etc.

If you want to change the time for idle time, just update the value of the second argument in setTimeout() function on line number 19.

If you want to dive deep into some good discussion related to this problem, then you can check out this StackOverflow discussion.

I hope these two solutions help you implement the check for idle time or user inactivity on your website.