在页面不活动3分钟后显示警告

Display a warning after 3 mins of inactivity on a page

本文关键字：显示 警告 3分钟 不活动      更新时间：2023-09-26

我正在做一个php测试页面。一次考试的最长时间为1小时，但在不活动10分钟后，考试将超时。超时时，测试页不会刷新或重定向…它保持不变，但是当用户在测试结束时点击"查看结果"按钮时，他将注销，并且他的结果未被注册。

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

如果在显示警告信息后，用户没有移动鼠标或点击7分钟，则提示"您已注销"。

我是一个初学者在编程，但我想这是相当简单的东西，显示2个消息后3和10分钟的不活动，定时器复位在鼠标移动或点击。

谁能给我一个好的解决方案吗?谢谢! 
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所指出的，你的服务器将无法验证你在客户端所做的任何事情，所以如果这很重要，你也需要添加服务器端代码。

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

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

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

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/

相关文章：