空闲/不活动 60 秒后重定向用户？答案

【问题标题】：Redirect user after 60 seconds of idling/inactivity?空闲/不活动 60 秒后重定向用户？
【发布时间】：2011-08-03 15:07:54
【问题描述】：

如何在我的网站上使用 JavaScript 在 60 秒不活动后将用户重定向到 /logout 页面？

我知道设置计时器或使用元刷新标签很简单：但我只想重定向非活动用户，而不是中断某人的活动会话/使用。

这可以用 JavaScript 实现吗？

【问题讨论】：

不确定，但我认为您可以将每个操作绑定到将重置计时器的函数...
什么是“非活动”定义？鼠标不动？不按键？如果他们用 60 秒的时间阅读一些东西，而不是在阅读时敲击鼠标和键盘怎么办？
如果用户在键盘前昏倒了，通知医院不是很好吗？我说的 UI 功能很棒 ;)

标签： javascript redirect timeout dom-events user-inactivity

【解决方案1】：

我相信您正在寻找这样的东西：
http://paulirish.com/2009/jquery-idletimer-plugin/

如果您要自己编写代码，则需要捕获鼠标和键盘事件并在发生任何这些事件后重新启动计时器。如果计时器达到阈值或从阈值倒计时到 0，您可以重置页面的 URL。

【讨论】：

【解决方案2】：

还有一个更新版本的插件。

它将能够在整个文档或单个元素上触发空闲事件。例如，将鼠标悬停在某个元素上 x 秒，它会触发一个事件。当用户再次活跃时会触发另一个事件。

此空闲事件将允许您在给定的不活动时间后重定向用户。

支持的活动：mousemove keydown wheel DOMMouseScroll mousewheel mousedown touchstart touchmove MSPointerDown MSPointerMove

https://github.com/thorst/jquery-idletimer

【讨论】：

【解决方案3】：

不要使用具有不必要 Kbytes 的插件，您只需要一个像这样的简单函数
（请参阅 cmets 中的说明）：

<script>
(function() {

    const idleDurationSecs = 60;    // X number of seconds
    const redirectUrl = '/logout';  // Redirect idle users to this URL
    let idleTimeout; // variable to hold the timeout, do not modify

    const resetIdleTimeout = function() {

        // Clears the existing timeout
        if(idleTimeout) clearTimeout(idleTimeout);

        // Set a new idle timeout to load the redirectUrl after idleDurationSecs
        idleTimeout = setTimeout(() => location.href = redirectUrl, idleDurationSecs * 1000);
    };

    // Init on page load
    resetIdleTimeout();

    // Reset the idle timeout on any of the events listed below
    ['click', 'touchstart', 'mousemove'].forEach(evt => 
        document.addEventListener(evt, resetIdleTimeout, false)
    );

})();
</script>

如果你想重定向到主页（通常在/），请将'/logout'更改为'/'：

    const redirectUrl = '/';  // Redirect idle users to the root directory

如果你想重新加载/刷新当前页面，只需将上面代码中的'/logout'更改为location.href即可：

    const redirectUrl = location.href;  // Redirect idle users to the same page

【讨论】：

【解决方案4】：

在用户登录、点击某物或移动鼠标时设置一个计时器。您可以维护 localStorage、sessionStorage 或任何全局变量来跟踪空闲时间。

let obj_date = new Date();
let miliseconds = obj_date.getTime(); // Returns the number of miliseconds since 1970/01/01
localStorage.setItem("idle_time",miliseconds);

之后，每隔 10、20、30 或 60 秒（根据您的选择）继续从 setInterval() 之类的内部调用以下函数，以检查该时间限制是否已过期。或者您可以在用户尝试交互时调用该函数来检查他的空闲时间是否超过了阈值。

function check_if_session_expired() {
  let max_idle_minutes=1;
  let miliseconds_now = obj_date.getTime();
  let get_idle_time_in_miliseconds = localStorage.getItem("idle_time");
  let one_minute_to_milisecond = 1000 * 60;
  if ((Math.round(miliseconds_now / one_minute_to_milisecond) - Math.round(get_idle_time_in_miliseconds / one_minute_to_milisecond)) >= max_idle_minutes) {
    console.log("expired");
    //clear sessionStorage/localStorage if you want
    localStorage.removeItem("idle_time");
    //end the session and redirect the user to logout page
    window.location.replace('example.com/logout');
  } else {
    localStorage.setItem("idle_time",miliseconds_now);
  }
}

您可以使用 cookie 来做同样的事情。

【讨论】：