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...
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...
Share Improve this question edited Jul 12, 2014 at 19:59 Mulan 135k34 gold badges239 silver badges274 bronze badges asked Jun 21, 2014 at 4:59 mifalconmifalcon 531 gold badge2 silver badges8 bronze badges 1- 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 Commented Jul 12, 2014 at 20:27
3 Answers
Reset to default 15Try 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/acNfy/4
You will have to hover your move on the lower right window and stay inactive for 5 seconds to see the results :)
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".
I would try firing the timeout on window load too.
apologies, for the inplete 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);
})();