0

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!

4

4 回答 4

4 
var timeout;

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

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

正如@Elzo Valugi 指出的那样，您的服务器将无法验证您在客户端所做的任何事情，因此如果这很重要，您还需要添加服务器端代码。

于 2013-04-22T15:50:47.617 回答
2 
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);
}
于 2013-04-22T15:48:02.770 回答
0

如果您真的想正确，请假设任何客户端都是可伪造的，而忘记 JS 解决方案。唯一正确的方法是服务器端。但是，不幸的是，HTTP 请求是无状态的，这意味着您不确切知道客户端在做什么以及他是否仍然处于活动状态。您可以做的是在每个请求上更新会话信息服务器端，并且每分钟一次，您有一个 cron 作业作为过期会话的垃圾收集器。

于 2013-04-22T15:49:09.337 回答
0

这应该允许您在不修改核心计时器逻辑的情况下调整区域和实际毫秒/操作

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/

于 2013-04-22T16:00:49.600 回答