javascript 在页面上闲置 3 分钟后显示警告
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16151112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display a warning after 3 mins of inactivity on a page
提问by Klausss
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.
我正在一个带有测试的 php 页面上工作。测试的最长时间为 1 小时，但会话在 10 分钟不活动后超时。超时时，测试页面不会刷新或重定向......它保持不变，但是当用户在测试结束时点击“查看结果”按钮时，他会被注销并且他的结果不会被注册。
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.
我只需要 - [页面上 3 分钟不活动后] - 显示警告消息。如果在显示消息后用户移动鼠标 - 或单击 - 页面上的任何位置，计时器将重置而不刷新页面。
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".
如果即使在显示警告消息后用户没有移动鼠标或点击 7 分钟，消息也会显示“您已被注销”。
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.
我是编程的初学者，但我想这是非常简单的东西，在 3 分钟和 10 分钟不活动后显示 2 条消息，计时器在鼠标移动或单击时重置。
Could somebody help me with a nice solution to this? Thanks!
有人可以帮我解决这个问题吗？谢谢！
回答by Jonah
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.
正如@Elzo Valugi 所指出的，您的服务器将无法验证您在客户端所做的任何事情，因此如果这很重要，您还需要添加服务器端代码。
回答by Ian Brindley
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);
}
回答by Elzo Valugi
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.
如果你真的想是正确的，那就假设客户端的任何东西都是可以伪造的，而忘记 JS 解决方案。唯一正确的方法是服务器端。但是，不幸的是，HTTP 请求是无状态的，这意味着您不知道客户端在做什么以及他是否仍然处于活动状态。您可以做的是在每个请求上更新会话信息服务器端，并且每分钟一次您有一个 cron 作业，作为过期会话的垃圾收集器。
回答by Terry Young
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.net/terryyounghk/wMZJA/
jsFiddle：http: //jsfiddle.net/terryyounghk/wMZJA/
