如何使用Javascript检查空闲活动

时间:2017-09-27 09:32:37

标签: javascript reactjs

JavaScript中是否有任何默认方式来检查用户活动。如果不是如何解决这个问题。

2 个答案:

答案 0 :(得分:1)

以下是功能的简短示例,如果用户在大约10分钟内处于非活动状态,则会发生某些事情。

在启动应用程序时:

window.lastActivity = Date.now();
document.addEventListener('click', function(){
    window.lastActivity = Date.now();
})

某处特定服务:

var TIMEOUT = 600000 //10 mins
var activityChecker = setInterval(check, 3000);

function check() {
    var currentTime = Date.now();
    if (currentTime - window.lastActivity > TIMEOUT) {
        // do something useful, for example logout or whatever
    }
}

这种方法很好,因为如果用户最小化浏览器或切换到另一个选项卡等,它不依赖于一些工作不正确的计时器。 我们只需每隔几秒检查一次lastActivity时间戳的当前时间戳。 您可以使用您需要的任何其他类型的事件或任何其他适合您将用户视为活动的条件来更改我的代码中的“click”事件。

答案 1 :(得分:1)

在java脚本中没有默认的方法。解决此问题的一种方法是使用JavaScript事件。

this.lastActiveTime = new Date();
          window.onclick = function () {
                this.lastActiveTime= new Date();
             };
             window.onmousemove = function () {
               this.lastActiveTime= new Date();
             };
             window.onkeypress = function () {
                this.lastActiveTime= new Date();
             };
             window.onscroll = function () {
                this.lastActiveTime= new Date();
             };
             
          let idleTimer_k = window.setInterval(CheckIdleTime, 10000);
       
          function CheckIdleTime() {
//returns idle time every 10 seconds
                  let dateNowTime = new Date().getTime();
                  let lastActiveTime = new Date(this.lastActiveTime).getTime();
                  let remTime = Math.floor((dateNowTime-lastActiveTime)/ 1000);
// converting from milliseconds to seconds
                 console.log("Idle since "+remTime+" Seconds Last active at "+this.lastActiveTime)
          }
<div> APP Here <br/><br/><br/><br/><br/><br/>make activity here<br/><br/><br/><br/><br/>Till here </div>