How to Detect Idle Time in JavaScript

As a web developer, detecting the user’s idle time can be useful in various scenarios.

For example, if you have a secure application, you might want to log out the user after a certain period of inactivity.

Or, you could show a popup asking the user if they are still there after a certain idle time.

In this Javascript tutorial, we will discuss how to detect the user’s idle time in JavaScript.

We will be using the JavaScript setTimeout() function to achieve this.

Using setTimeout() and setInterval() Functions

The basic idea behind this method is to use the setTimeout() function to call a function that will check if the user is idle or not.

If the user is idle, we will increment a counter, and if the counter reaches a certain value, we will consider the user to be idle.

Here is the code that implements this logic:

let idleTime = 0;

//Increment the idle time counter every minute.
let idleInterval = setInterval(timerIncrement, 60000); // 1 minute

//Zero the idle timer on mouse movement.
document.addEventListener("mousemove", resetIdleTimer);
document.addEventListener("mousedown", resetIdleTimer);
document.addEventListener("keypress", resetIdleTimer);
document.addEventListener("touchstart", resetIdleTimer);

function resetIdleTimer() {
    idleTime = 0;
}

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 19) { // 20 minutes
        alert("You have been idle for too long!");
    }
}

In this code, we first set an interval of 1 minute using the setInterval() function.

The timerIncrement() function will be called every minute and will increment the idleTime counter.

We also have event listeners for mouse movement, mouse down, keypress, and touchstart events.

These events will reset the idleTime counter back to 0, indicating that the user is active.

Using the idle-js Library

Another way to detect the user’s idle time is by using the idle-js library.

This library provides a simple API for detecting user activity, idle time, and other events.

To use the idle-js library, you need to install it using npm:

npm install idle-js

Here is the code that implements this library:

import { Idle } from 'idle-js';

const idle = new Idle();

idle.setIdle(20 * 60);

idle.onIdle = function () {
  alert('You have been idle for too long!');
};

idle.start();

In this code, we first import the Idle class from the idle-js library.

Then, we create an instance of the Idle class and set the idle time to 20 minutes using the setIdle() method.

We then specify the onIdle function that will be called when the user is idle. Finally, we start the idle detection using the start() method.

Conclusion

In this tutorial, we discussed two methods for detecting the user’s idle time in JavaScript.

Both methods use the setTimeout() function, but one uses it with the setInterval() function, and the other uses the idle-js library for a more streamlined approach.

Regardless of the method you choose, detecting the user’s idle time can be a useful tool for improving the user experience in your web application.

Whether it’s for security purposes or for providing a better user experience, detecting idle time is an important aspect of web development.