In a lot of web applications, it can be really useful to detect whether the user is still active or not. For example, when a user is no longer active it can make a lot of sense to automatically log the user out or remind them that they’re about to be logged out.

How to detect Inactivity

In JavaScript, different events are fired when the user moves the mouse, scrolls the mouse, or uses the keyboard. The easiest way to implement this sort of thing is to use a timer that starts whenever the user hasn’t done anything with the app. At the start of the page load, we start the timer and whenever the user has done anything we can restart the timer.

Implementing the function to start the timer should look something like this

var timeoutInMiliseconds = 60000;
var timeoutId; 

function startTimer() { 
	// window.setTimeout returns an Id that can be used to start and stop a timer
	timeoutId = window.setTimeout(doInactive, timeoutInMiliseconds)
}

function doInactive() {
	// does whatever you need it to actually do - probably signs them out or stops polling the server for info
}

Basically, every 60 seconds this would call the function doInactive which would do whatever it is you need. In a lot of cases it would probably execute JavaScript that signs out the user or stop polling a server for data.

Right now, this code isn’t very useful because we don’t actually start the timer and we aren’t clear the timer when the user has done something at all.

Resetting the timer is going to be really easy, because we can simply use window.clearTimeout to get rid of the original timer and then we can just start the timer again by calling our original startTimer function.

function resetTimer() { 
	window.clearTimeout(timeoutId)
	startTimer();
}

The real magic that makes this whole thing actually work is that we need to add some event listeners that will fire off the resetTimer() function and start the clock all over again.

function setupTimers () {
    document.addEventListener("mousemove", resetTimer, false);
    document.addEventListener("mousedown", resetTimer, false);
    document.addEventListener("keypress", resetTimer, false);
    document.addEventListener("touchmove", resetTimer, false);
	
    startTimer();
}

// jQuery isn't actually required for any of this - if you aren't using jQuery just call setupTimers()
$(document).ready(function({
	// do some other initialization
	
	setupTimers();
})

Collectively, everything should look this if you aren’t going to make many structural changes to the code:

var timeoutInMiliseconds = 60000;
var timeoutId; 
 
function startTimer() { 
    // window.setTimeout returns an Id that can be used to start and stop a timer
    timeoutId = window.setTimeout(doInactive, timeoutInMiliseconds)
}
 
function doInactive() {
    // does whatever you need it to actually do - probably signs them out or stops polling the server for info
}

function setupTimers () {
	document.addEventListener("mousemove", resetTimer, false);
    document.addEventListener("mousedown", resetTimer, false);
    document.addEventListener("keypress", resetTimer, false);
	document.addEventListener("touchmove", resetTimer, false);
	
	startTimer();
}

$(document).ready(function({
	// do some other initialization
	
	setupTimers();
})

To increase or decrease the timeout, you will need to change the value of the timeoutInMiliseconds variable. As the label says, it’s in miliseconds. Please let me know if you have any questions or if you find these kinds of post helpful.