如何使用JavaScript/jQuery检测用户当前是否在页面上处于活动状态？

我需要检测用户在当前页面上的非活动状态（不单击或键入）是否超过30分钟

我认为最好使用附在body标签上的事件blubbling，然后继续重置计时器30分钟，但我不确定如何创建它

我有可用的jQuery，尽管我不确定其中有多少将实际使用jQuery

编辑：我更需要知道他们是否正在积极使用该网站，因此单击（更改字段或字段内的位置，或选择复选框/收音机）或键入（在输入、文本区域等）。如果他们在另一个选项卡或使用另一个程序，那么我的假设是他们没有使用该站点，因此应该注销（出于安全原因）

编辑#2:所以大家都很清楚，这根本不用于确定用户是否登录、身份验证或其他任何事情。现在，如果用户在30分钟内没有发出页面请求，服务器将注销用户。此功能可防止有人花费超过30分钟填写表单，然后提交表单却发现自己尚未注销。因此，这将与服务器站点结合使用，以确定用户是否处于非活动状态（而不是单击或键入）。基本上，协议是在空闲25分钟后，他们将看到一个对话框来输入密码。如果在5分钟内没有，系统会自动将其注销，同时服务器会话也会注销（下次访问页面时，与大多数站点一样）

---

Javascript仅用于向用户发出警告。如果JavaScript被禁用，那么他们将不会收到警告，并且（以及大多数网站不工作），他们将在下次请求新页面时注销。

您可以观看，但这大概是在没有听到单击事件的情况下，您将获得的关于用户仍在那里的最佳指示。但是javascript无法判断它是活动选项卡还是浏览器处于打开状态。（好的，你可以得到浏览器的宽度和高度，这会告诉你它是否被最小化）

使用jQuery，你可以很容易地观察鼠标移动，并使用它将指示活动的变量设置为true，然后使用vanilla javascript，你可以每30分钟（或任何其他间隔）检查一次这个变量，看看它是否为true。如果为false，则运行函数或其他任何函数。 查找setTimeout和setInterval以进行计时。您可能还需要每隔一分钟左右运行一个函数才能将变量重置为false。

这里是我的快照：

var lastActivityDateTime = null;

function checkActivity( )
{
    var currentTime = new Date();
    var diff = (lastActivityDateTime.getTime( ) - currentTime.getTime( ));
    if ( diff >= 30*60*1000)
    {
        //user wasn't active;
        ...
    }
    setTimeout( 30*60*1000-diff, checkActivity);
}

setTimeout( 30*60*1000, checkActivity); // for first time we setup for 30 min.


// for each event define handler and inside update global timer
$( "body").live( "event_you_want_to_track", handler);

function handler()
{
   lastActivityDateTime = new Date();
   // rest of your code if needed.
}

---

我最近刚刚做了类似的事情，虽然使用Prototype而不是JQuery，但我认为只要JQuery支持自定义事件，实现就会大致相同

简而言之，IdleMonitor是一个观察鼠标和键盘事件的类（根据需要进行相应调整）。每隔30秒，它会重置计时器并广播一个state:idle事件，除非它获得鼠标/按键事件，在这种情况下，它会广播一个state:active事件

var IdleMonitor = Class.create({

    debug: false,
    idleInterval: 30000, // idle interval, in milliseconds
    active: null,
    initialize: function() {
        document.observe("mousemove", this.sendActiveSignal.bind(this));
        document.observe("keypress", this.sendActiveSignal.bind(this));
        this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval);
    },

    // use this to override the default idleInterval
    useInterval: function(ii) {
        this.idleInterval = ii;
        clearTimeout(this.timer);
        this.timer = setTimeout(this.sendIdleSignal.bind(this), ii);
    },

    sendIdleSignal: function(args) {
        // console.log("state:idle");
        document.fire('state:idle');
        this.active = false;
        clearTimeout(this.timer);
    },

    sendActiveSignal: function() {
        if(!this.active){
            // console.log("state:active");
            document.fire('state:active');
            this.active = true;
            this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval);
        }
    }
});

然后我创建了另一个类，其中包含以下内容：

Event.observe(document, 'state:idle', your-on-idle-functionality);
Event.observe(document, 'state:active', your-on-active-functionality)

---

这就是我想到的。它似乎在大多数浏览器中都能工作，但我想确保它在任何地方、任何时候都能工作：

var timeoutTime = 1800000;
var timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime);
$(document).ready(function() {
    $('body').bind('mousedown keydown', function(event) {
        clearTimeout(timeoutTimer);
        timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime);
    });
});

---

有人看到任何问题吗？

如果这是一个安全问题，那么使用javascript执行此客户端绝对是执行此检查的错误途径。用户可以很容易地禁用javascript：那么您的应用程序会做什么？如果用户在超时之前关闭浏览器会怎么样。他们曾经注销过吗

大多数服务器端框架都为登录设置了某种会话超时。用它，省去你的工程工作

你不能相信人们没有javascript就无法登录，因此用户有javascript。这样的假设对任何意志坚定、甚至受过良好教育的攻击者都没有威慑力

使用javascript进行此操作就像一名保安将银行金库的钥匙交给客户一样。唯一有效的方法就是信仰

---

请相信我，以这种方式使用javascript（并且需要javascript进行登录！！）是设计任何类型web应用程序的一种令人难以置信的方法。

如果不使用JS，一种更简单（更安全）的方法就是将lastActivity时间戳存储在用户会话中，并在页面加载时检查它。假设您使用的是PHP（您可以轻松地在其他平台上重做此代码）：

if（$_会话['lastAct']+1800）

并将其添加到页面中（可选，无论页面是否刷新，用户都将注销（当用户在下一个页面日志中注销时））

---

如果您担心在登录超时后用户信息丢失；另一种选择是，在重新路由到日志页面之前，在打开新会话（当服务器关闭/取消旧会话时，新会话将始终启动）时，仅存储所有已发布的信息。如果用户成功登录，则可以使用此保存的信息将用户返回到其所在位置。这样，即使用户离开几小时，他也可以在成功登录后回到原来的位置；不会丢失任何信息

这需要程序员做更多的工作，但这是一个很好的特性，用户完全欣赏。他们特别欣赏这样一个事实，即他们可以完全专注于他们必须做的事情，而不必担心每30分钟左右就可能丢失他们的信息。

是一个交叉浏览器轻量级解决方案，可以实现JU

if(($_SESSION['lastAct'] + 1800) < time()) {
    unset($_SESSION);
    session_destroy();
    header('Location: session_timeout_message.php');
    exit;
}

$_SESSION['lastAct'] = time();

<meta http-equiv="refresh" content="1801;" /> 

ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds

ifvisible.on("idle", function(){
   // do something
});