CODEWITHSUNDEEP
javascriptjqueryajax
Klausss
Klausss

Reputation: 7

Display a warning after 3 mins of inactivity on a page

I am working on a php page with tests. The max time for a test is 1 hour, but the session times out after 10 mins of inactivity. At timeout, the tests page doesn't refresh or redirect... It stays the same, but when the user hits the "see the results" button at the end of the test, he is logged out and his results are not registred.

I just need - [after 3 mins of inactivity on the page] - to diplay a warning message. if after displaying the message the user makes a mouse movement - or click - anywhere on the page, the timer resets without refreshing the page.

If even after displaying the warning message the user didn't moved his mouse or clicked for 7 mins, the message shows "you have been logged out".

I am a beginner in progrmming, but I guess it's pretty simple stuff, displaying 2 messages after 3 and 10 mins of inactivity, both timer reset at mouse movement or click.

Could somebody help me with a nice solution to this? Thanks!

Upvotes: 0

Views: 13319

Answers (4)

Insyte
Insyte

Reputation: 2236

var timeoutWarn;
var timeoutLogout;

// Set the timer
resetTimer();

// Reset the timer
document.onmousemove = resetTimer();
document.onclick = resetTimer();

function resetTimer = function() {
    timeoutWarn = window.setTimeout(function() { 
        // create warning element.
    }, 180000);

    timeoutLogout = window.setTimeout(function() { 
        // ajax to process logout
        alert('You have been logged out');
    }, 420000);
}

Upvotes: 1

Terry Young
Terry Young

Reputation: 3531

This should allow you to tweak the area and actual milliseconds/actions without modifying the core timer logic

var $area = $(document),
    idleActions = [
        {
            milliseconds: 3000, // 3 seconds
            action: function () { alert('Warning'); }
        },
        {
            milliseconds: 3000, // 3 + 3 = 6 seconds
            action: function () { alert('Logout'); }
        }
    ];


function Eureka (event, times, undefined) {
    var idleTimer = $area.data('idleTimer');
    if (times === undefined) times = 0;
    if (idleTimer) {
        clearTimeout($area.data('idleTimer'));
    }
    if (times < idleActions.length) {
        $area.data('idleTimer', setTimeout(function () {
            idleActions[times].action(); // run the first action
            Eureka(null, ++times); // setup the next action
        }, idleActions[times].milliseconds));
    } else {
        // final action reached, prevent further resetting
        $area.off('mousemove click', Eureka);
    }
};

$area
    .data('idle', null)
    .on('mousemove click', Eureka);

Eureka(); // start the first time

jsFiddle: http://jsfiddle.net/terryyounghk/wMZJA/

Upvotes: 0

Jonah
Jonah

Reputation: 16242

var timeout;

document.onmousemove = resetTimer;
document.onclick = resetTimer;

function resetTimer = function() {
  clearTimeout(timeout);
  timeout = setTimeout(function(){alert("3 minute warning");}, 3*60*1000);
}

As @Elzo Valugi noted, your server will not be able to verify anything you do client side, so if that is important you will need to add server-side code as well.

Upvotes: 4

Elzo Valugi
Elzo Valugi

Reputation: 27896

If you really care to be correct go with the assumption that anything client side is fakeable and forget about JS solutions. The only correct way to do this is server side. BUT, unfortunately, HTTP requests are stateless, which means you dont know exactly what the client is doing and if he is still active. What you can do is to update the session information server side on each request and once every minute you have a cron job that works as a garbage collector for the expired sessions.

Upvotes: 0

Related Questions