setTimeout function if user not active

Question

I can do something such as the following every 30 seconds to reload the page, and the backend logic will determine which session have been invalidated:

setInterval(function () {
    location.reload()
}, 30000);

However, how would I only run this 30s location.reload() if the user is not active? For example, how banks will have a user-timeout if the user has not been active on the page (which only starts counting after the user is 'inactive'). How would this be done?

http://stackoverflow.com/questions/13246378/detecting-user-inactivity-over-a-browser-purely-through-javascript — Eranda Karannagoda, Apr 12 '15 at 06:04

score 3 · Accepted Answer · answered Apr 12 '15 at 06:08

3

One way is to track mousemoves. If the user has taken focus away from the page, or lost interest, there will usually be no mouse activity:

(function() {
  var lastMove = Date.now();

  document.onmousemove = function() {
    lastMove = Date.now();
  }

  setInterval(function() {
    var diff = Date.now() - lastMove;
    if (diff > 1000) {
      console.log('Inactive for ' + diff + ' ms');
    }
  }, 1000);
}());

answered Apr 12 '15 at 06:08

RobG

142,382
31
172
209

isn't this method quite 'heavy', as this will be firing non-stop when the user is using the page? – David542 Apr 12 '15 at 06:18
1

@David542—so how to you track user activity without tracking user activity? Some other event can be used, but the overhead for this is very small. – RobG Apr 12 '15 at 06:21
Nice approach to wrap it all :-) will keep the namespace clear. – peter_the_oak Apr 12 '15 at 06:27

score 2 · Answer 2 · answered Apr 12 '15 at 06:16

First define what "active" means. "Active" means probably, sending a mouse click and a keystroke.

Then, design your own handler for these situations, something like this:

// Reseting the reload timer
MyActivityWatchdog.prototype.resetReloadTimer = function(event) {
  var reloadTimeInterval = 30000;
  var timerId = null;

  ...

  if (timerId) {
     window.clearInterval(timerId);
  }
  timerId = window.setInterval( reload... , reloadTimeInterval);

  ...

};

Then, make sure the necessary event handler will call resetReloadTimer(). For that, you have to look what your software already does. Are there key press handlers? Are there mouse movement handlers? Without knowing your code, registering keypress or mousemove on document or window and could be a good start:

window.onmousemove = function() {
  ...
  activityWatchdog.resetReloadTimer();
  ...
};

But like this, be prepared that child elements like buttons etc. won't fire the event, and that there are already different event handlers. The compromise will be finding a good set of elements with registered handlers that makes sure "active" will be recognized. E.g. if you have a big rich text editor in your application, it may be enough to register only there. So maybe you can just add the call to resetReloadTimer() to the code there.

*First define what "active" means.* Great start, should have said that myself. ;-) — RobG, Apr 12 '15 at 06:22

score 0 · Answer 3 · answered Apr 12 '15 at 06:11

0

To solve the problem, use window blur and focus, if the person is not there for 30 seconds ,it will go in the else condition otherwise it will reload the page .

setTimeout(function(){
    $(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                $('div').text("user is not active on page ");
                break;
            case "focus":
                location.reload()
                break;
        }
    }

    $(this).data("prevType", e.type);
    })},30000);

DEMO : http://jsfiddle.net/rpawdg6w/2/

answered Apr 12 '15 at 06:11

Shelly

355
1
7

There's no library tag or use in the OP. You haven't indicated which you're using. I get *{"error": "Please use POST request"}*. It also seems that this will run on every blur/focus pair, regardless of whether 30 seconds have passed. – RobG Apr 12 '15 at 06:15
What happens if the focus stays on the application but the user has a phone call and walks away? So the blur won't happen? – peter_the_oak Apr 12 '15 at 06:23

score 0 · Answer 4 · answered Apr 12 '15 at 06:15

You can check user Session in a background , for example send AJAX call every 30 - 60 seconds. And if AJAX's response will be insufficient (e.g. Session expired) then you can reload the page.

var timer;
  function checkSession() {
    $.ajax({
      url : 'checksession.php',
      success: function(response) {
        if (response == false) {
          location.reload();
        }
      }
    });
  
    clearTimeout(timer);
    timer = setTimeout(checkSession,30 * 1000);
}

checkSession();

setTimeout function if user not active

4 Answers4