如果查看页面未活动页面,则Javascript计时器不会运行

时间:2012-05-19 19:34:10

标签: javascript javascript-events

问题听起来很安静我知道但是这里有问题,以下代码完美无缺。定时器从30分钟开始,未检测到鼠标每秒移动计时器倒计时。当检测到鼠标移动时,计时器重置为30分钟,在页面不活动的25分钟处,css弹出窗口显示倒计时最后5分钟,在30分钟时,用户自动注销。但是,如果用户打开了页面但是正在主动查看另一个网页,则计时器会根据浏览器的速度减慢或完全停止。这实际上完全否定了剧本。是否可以让脚本继续正常倒计时,即使他们没有主动查看页面,仍然会强制用户退出页面?或者这些浏览器怪癖是为了减少内存负载?

     var Timing = 0;
     var CounterTime = 0;
     var TimePast = 0;
     var Seconds = 1800;
     var Warn = 1500;
     var MinuteLeft = 30;
     var SecondLeft = 60;
     var StopRefresh = 0;

     function ResponseTime()
     {
          Timing = Timing + 100;
          CounterTime = CounterTime + 100;
          if(Timing % 1000 == 0)
          {
                TimePast = TimePast + 1;
                SecondLeft = SecondLeft - 1;
                if(SecondLeft == 59)
                {
                     MinuteLeft = MinuteLeft-1; 
                }
                if(SecondLeft == 0)
                {
                     SecondLeft = 60;
                }
          }
          if(MinuteLeft != 0)
          {
                if(SecondLeft == 60)
                {
                      document.getElementById('CountdownTimer').firstChild.nodeValue = MinuteLeft+":00";
                }else if(SecondLeft < 10)
                {
                      document.getElementById('CountdownTimer').firstChild.nodeValue = MinuteLeft+":0"+SecondLeft;
                }else
                {
                      document.getElementById('CountdownTimer').firstChild.nodeValue = MinuteLeft+":"+SecondLeft;
                }
                if((MinuteLeft == 0) && (SecondLeft <= 10))
                {
                      document.getElementById('CountdownTimer').style.fontWeight = "bolder";
                      document.getElementById('CountdownTimer').style.color = "red";
                }
                      document.getElementById('CountdownTimer').style.fontWeight = "normal";
                      document.getElementById('CountdownTimer').style.color = "black";
                }else
                {
                      document.getElementById('CountdownTimer').firstChild.nodeValue = SecondLeft;
                if((MinuteLeft == 0) && (SecondLeft <= 10))
                {
                      document.getElementById('CountdownTimer').style.fontWeight = "bolder";
                      document.getElementById('CountdownTimer').style.color = "red";
                }else
                {
                      document.getElementById('CountdownTimer').style.fontWeight = "normal";
                      document.getElementById('CountdownTimer').style.color = "black";          
                }
          }
          if(TimePast == 1800)
          {
                 document.getElementById('DoLogoutRequest').submit();   
          }
          if(MinuteLeft <=4)
          {
                 document.getElementById('Overlay').style.visibility="visible";
                 document.getElementById('ForceLogout').style.visibility="visible";
          }else
          {
                 document.getElementById('Overlay').style.visibility="hidden";
                 document.getElementById('ForceLogout').style.visibility="hidden";  
          }
          $(document).ready(function(){
                 $(document).mousemove(function(){
                        Timing = 0;
                        TimePast = 0;
                        SecondLeft = 60;
                        MinuteLeft = 29;
                 });
           });
      }

1 个答案:

答案 0 :(得分:0)

您可以做的是修改脚本,以便在检测到鼠标移动时,首先检查自上次mousemove事件以来的当前秒数(使用Date对象)。

如果超过30分钟,那么您应该知道该人应该退出,然后您可以立即采取该行动。

想象一下这就像设置一个30秒标记的绊网但在有人绊倒之前不会开火。

然而,话虽如此,我真的非常担心这种方法的安全性。通常,客户端代码是不安全的。自动登出用户的事情应该在服务器端使用会话进行处理。

尽管如此,这种方法很有创意,因为它不会强迫我访问不同的页面。因此,您可以使用的另一种将服务器端方法与鼠标事件方法相结合的技术是将鼠标移动和时间存储在变量中。然后,在29:30分钟标记处,如果阵列包含在过去25分钟内发生的鼠标移动,请向服务器发出安全的AJAX请求,以告知会话该用户仍处于活动状态。

这会减少服务器上的负载,因为您只需要在需要时进行更新,并且它还允许您的用户使用该应用程序而无需刷新以防止注销,并且它还将保持实际“用户是否在服务器上登录“它所属的逻辑的一部分”。如果服务器从未听到客户端的响应,则服务器会将用户注销。

总而言之,您可以永远等待服务器等待,以便可以将用户注销:

      if(TimePast == 1800)
      {
             document.getElementById('DoLogoutRequest').submit();   
      }

如果没有您的客户登记,服务器正在采取更加权威的方式继续前进:

      if(TimePast <= 1800 && TimePast >= 1700)
      {
             // send keepalive request to the server to prevent auto-logout

      }