How to detect user inactivity with JavaScript?

Question

I am trying to have a wordpress page that logs you out with no activity after a certain interval of time. Right now I am just testing the "detect inactivity and do something" part of this (the key part). I found some code on here that partially works; here is the code:

<script>
var timeout;
document.onmousemove = function(){
clearTimeout(timeout);
timeout = setTimeout(function(){alert("move your mouse");}, 10000);
}
</script>

It is set right now to send that alert every 10 seconds just so I can see immediately it is working (will be much longer later). Anyway; when i run this on a page it does nothing. I can sit there for 5 minutes and nothing happens. But if I leave that tab in my browser, it immediately starts working and sends the alert every 10 seconds if no activity like it is supposed to.

But the whole function does not work if I just sit there on that page and do nothing. Can anyone help with this? Thanks...

When you just type that into your console, but don't do anything, of course nothing will happen. The timer will be initialised by the *first* mousemove that you make… — Bergi, Jul 12 '14 at 20:27

score 12 · Accepted Answer · answered Jun 21 '14 at 05:27

12

Try this instead:

function onInactive(ms, cb){

    var wait = setTimeout(cb, ms); 
    document.onmousemove = document.mousedown = document.mouseup = document.onkeydown = document.onkeyup = document.focus = function(){
        clearTimeout(wait);
        wait = setTimeout(cb, ms);
    };
}

JSFiddle:

http://jsfiddle.net/acNfy/4

You will have to hover your move on the lower right window and stay inactive for 5 seconds to see the results :)

answered Jun 21 '14 at 05:27

imbondbaby

6,351
3
21
54

4

The accepted answer has the liability that any existing event handlers on those events will be overwritten. There are several excellent and safer answers to the problem here: http://stackoverflow.com/questions/667555/ – grahamesd May 26 '15 at 19:23
Thanks! @imbondbaby – DanyMartinez_ May 04 '21 at 21:46
As @grahamesd said, the answers here are more complete: https://stackoverflow.com/questions/667555/how-to-detect-idle-time-in-javascript – Javi Villar Apr 06 '23 at 09:01

Javi Villar · Answer 2 · 2023-07-05T14:47:52.167

I like to remove the listeners when the inactivity takes place so this is a quick example of how to detect "no interaction":

const IDLE_TIMEOUT = 5000; // in milliseconds
const idle_events = {
    load: false,
    mousemove: false,
    mousedown: false,
    touchstart: false,
    touchmove: false,
    keydown: false,
    click: false,
    scroll: true
}
let time;

function sendIdleEvent() {
    removeListeners()

    // Do something here
    // ...
}

function resetIdleTimeout() {
    clearTimeout(time)
    time = setTimeout(sendIdleEvent, IDLE_TIMEOUT)
}

function addListeners() {
    Object.entries(idle_events).forEach(([event_name, capture]) => {
        window.addEventListener(event_name, resetIdleTimeout, capture)
    })
}

function removeListeners() {

    Object.entries(idle_events).forEach(([event_name, capture]) => {
        window.removeEventListener(event_name, resetIdleTimeout, capture)
    })
}

addListeners()
resetIdleTimeout()

Just change the IDLE_TIMEOUT value with the time you want to consider the user is not interacting and add whatever you need to do inside the sendIdleEvent function.

Adding or removing "listeners" you can define exactly what you consider "no interaction".

Motti Horesh · Answer 3 · 2014-06-21T05:38:54.357

-3

I would try firing the timeout on window load too.

apologies, for the incomplete answer before. A recursive setTimeout might be what you are looking for.

(function interaction(){
    setTimeout(function(){
    // check for movement,
    if(movement...) {
        // if movement do nothing
        }
    else {
        interaction();



    },10000);

})();

edited Jun 21 '14 at 05:38

answered Jun 21 '14 at 05:05

Motti Horesh

798
8
10

Hello Motti: thanks for your response; but I am really unsure what you mean, can you clarify it any or provide any more info? Thanks…. – mifalcon Jun 21 '14 at 05:27

How to detect user inactivity with JavaScript?

3 Answers3