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

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

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

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

我是一个编程新手，但我想这是非常简单的东西，在3分钟和10分钟的不活动后显示2条消息，都是在鼠标移动或单击时重置计时器

---

有人能帮我想出一个好办法吗？谢谢

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

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

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

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

---

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

这应该允许您调整区域和实际毫秒/操作，而无需修改核心计时器逻辑

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

var$area=$（文档），
idleActions=[
{
毫秒：3000，//3秒
操作：函数（）{alert（'Warning'）；}
},
{
毫秒：3000，//3+3=6秒
操作：函数（）{alert（'Logout'）；}
}
];
功能Eureka（事件、时间、未定义）{
var idleTimer=$area.data（'idleTimer'）；
如果（次===未定义）次=0；
如果（空闲时间）{
clearTimeout（$area.data（'idleTimer'））；
}
if（乘以

---

jsiddle:

这应该允许您调整区域和实际毫秒/操作，而无需修改核心计时器逻辑

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

var$area=$（文档），
idleActions=[
{
毫秒：3000，//3秒
操作：函数（）{alert（'Warning'）；}
},
{
毫秒：3000，//3+3=6秒
操作：函数（）{alert（'Logout'）；}
}
];
功能Eureka（事件、时间、未定义）{
var idleTimer=$area.data（'idleTimer'）；
如果（次===未定义）次=0；
如果（空闲时间）{
clearTimeout（$area.data（'idleTimer'））；
}
if（乘以

---

JSIDLE:

window.setTimeout（函数（）{alert（'3分钟警告'）}，30000）检测活动留给读者作为练习。@Marc B这不是3分钟的不活动写这篇文章：它可能很接近，把这个计时器连接到一个监听键盘按下和鼠标移动的事件上，它可能会完成这项工作。仅供参考。HTTP中的活动表示服务器请求
window.setTimeout（函数（）{alert（'3分钟警告'）}，30000）检测活动留给读者作为练习。@Marc B这不是3分钟的不活动写这篇文章：它可能很接近，把这个计时器连接到一个监听键盘按下和鼠标移动的事件上，它可能会完成这项工作。仅供参考。HTTP中的活动表示服务器请求确定，然后执行移动鼠标/单击检查？确定，然后执行移动鼠标/单击检查？谢谢，Terry！这似乎在某种程度上起作用，但即使我移动鼠标或滚动，它也会启动。如果我在“警告”后移动鼠标，“注销”触发，只有在“警告”后不移动鼠标时才会触发。如果在发出警告后，我重新开始活动，然后再次停止，它应该会再次触发“警告”。当我对此进行更多思考时，这种情况是否也会发生在我的演示链接中（我似乎无法重现）？你有没有可能得到ce