How to Detect Idle Time in JavaScript

How to detect user inactivity with JavaScript?

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 :)

How to implement Idle time in angular using native JS code?

The best approach is to use Angular HostListener decorator and bind it to document:

export class AppComponent {
  time: number;

  ngOnInit() {  
    this.resetTimer();
  }

  @HostListener('document:mousemove')
  @HostListener('document:keypress')
  @HostListener('document:click')
  @HostListener('document:wheel')
  resetTimer() {
    clearTimeout(this.time);
    this.time = setTimeout(() => {
      alert('Idle for 3 seconds. You can call your api here');
    }, 3000);
  }
}

Here is solution in stackblitz

Detect inactivity on touch devices with javascript

I will adjust the timer (you sayd you want an update every minute but you set you setInterval to 3000 millisec and i will try with this:

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

  //Zero the idle timer on mouse movement.
  $(this).mousemove(function (e) {
    idleTime = 0;
  });
  $(this).keypress(function (e) {
    idleTime = 0;
  });
  //Zero the idle timer on touch events.
  $(this).bind('touchstart', function(){
   idleTime = 0;
  });
  $(this).bind('touchmove', function(){
   idleTime = 0;
  });
});

function timerIncrement() {
  idleTime = idleTime + 1;
  if (idleTime > 1) { 
    alert("ok");
  }
}

Detecting idle time in JavaScript across Tabs?

For older browsers, I would use the Observer pattern to communicate across tabs (as long as the tabs have been opened by a common parent).

If HTML5 is an option (ie: modern browsers only), you can use local storage. If you go that route, I would explore local forage from Mozilla since that might have a shim for older browsers.

If you want something that is a cross-browser solution, you will need to use the server to track that.

Update:
You can also post messages across documents in different domains using Cross-document Messaging.

API Doc: https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
Example: http://html5demos.com/postmessage2

How to use webworker in javascript/Jquery to detect idle time?

Since web workers do not have access to DOM, you can post a message to your worker from your main thread when a key is pressed or on mouse move:

 $(document).keypress(function(e){

              worker.postMessage({
                type: 'KEYPRESS',
                keycode: e.which
            });
    });

And in your woker listen to the message:

self.onmessage = function(msg) {
  switch (msg.data.type) {
    case 'KEYPRESS':
     console.log("Key pressed");
     idleTime = 0;
     break;
   }}

How to know browser idle time?

Here is pure JavaScript way to track the idle time and when it reach certain limit do some action:

var IDLE_TIMEOUT = 60; //seconds

var _idleSecondsTimer = null;

var _idleSecondsCounter = 0;

document.onclick = function() {

    _idleSecondsCounter = 0;

};

document.onmousemove = function() {

    _idleSecondsCounter = 0;

};

document.onkeypress = function() {

    _idleSecondsCounter = 0;

};

_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {

     _idleSecondsCounter++;

     var oPanel = document.getElementById("SecondsUntilExpire");

     if (oPanel)

         oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";

    if (_idleSecondsCounter >= IDLE_TIMEOUT) {

        window.clearInterval(_idleSecondsTimer);

        alert("Time expired!");

        document.location.href = "logout.html";

    }

}

#SecondsUntilExpire { background-color: yellow; }

You will be auto logged out in <span id="SecondsUntilExpire"></span> seconds.

---

Related Topics