javascript - Display a warning after 3 mins of inactivity on a page - Stack Overflow

admin管理员组

文章数量:1356959

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!

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!

• javascript
• jquery
• ajax

Share Improve this question Follow edited Apr 22, 2013 at 15:47 bwoebi 23.8k55 gold badges6363 silver badges8080 bronze badges asked Apr 22, 2013 at 15:40 KlausssKlausss 711 gold badge11 silver badge44 bronze badges 6

• 2 window.setTimeout(function() { alert('3 minute warning') }, 30000); Detecting activity is left as an exercise to the reader. – Marc B Commented Apr 22, 2013 at 15:43
• 2 @Marc B this is not 3 minutes of inactivity – Elzo Valugi Commented Apr 22, 2013 at 15:43
• Try this post: stackoverflow./questions/667555/… – jbolanos Commented Apr 22, 2013 at 15:44
• It may be close though, have this timer attached to an event that listens for keyboard presses and mouse movement and it might do the job. – Useless Intern Commented Apr 22, 2013 at 15:45
• 1 FYI. activity in HTTP means a server request – Elzo Valugi Commented Apr 22, 2013 at 15:53

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 4

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.

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);
}

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.

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/terryyounghk/wMZJA/

本文标签： javascriptDisplay a warning after 3 mins of inactivity on a pageStack Overflow