在页面上闲置 3 分钟后显示警告

Question

我正在开发一个带有测试的 php 页面。测试的最长时间为 1 小时，但会话在 10 分钟不活动后超时。超时时，测试页面不会刷新或重定向......它保持不变，但是当用户在测试结束时点击“查看结果”按钮时，他会退出并且他的结果不会被注册。

我只需要 - [在页面上闲置 3 分钟后] - 显示警告消息。 如果在显示消息后用户在页面上的任意位置移动鼠标或单击，则计时器会重置而不刷新页面。

如果即使在显示警告消息后，用户在 7 分钟内没有移动鼠标或单击，则消息显示“您已注销”。

我是编程的初学者，但我想这很简单，在 3 分钟和 10 分钟不活动后显示 2 条消息，在鼠标移动或单击时都会重置计时器。

有人可以帮我解决这个问题吗？谢谢！

Answer 1

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

Answer 2

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

Answer 3

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 所说，您的服务器将无法验证您在客户端所做的任何事情，因此如果这很重要，您还需要添加服务器端代码。

Answer 4

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

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/