0

我已经创建了一个简单的Timer服务。在定时服务中,我每分钟都在监视用户。为什么clearInterval没有清除setInterval定时器

页面加载时,已经设置了3分钟以获得注销警报,并且在1分钟之前这意味着2分钟获得引导警告,同时单击继续按钮,它将清除当前间隔并再次分配3分钟,否则,在3分钟后获得注销警告以注销。

第一次它的工作正常,同时点击继续按钮,它不会重新分配用户的值。对于第3分钟本身,它显示注销。

代码中哪里出错。

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js" ></script> 
    <script data-require="[email protected]" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body onload="TimerService()"> 
    <p id="demo"></p> 
    <h1 id="title">Javascript timer problem</h1> 
    <div id="modeldialog"></div> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <label class="session-expiration"> 
       <span>Session Expiration</span> 
       <img src="~/Images/Warning_Alert_Icon_26.png" /> 
      </label> 
      </div> 
      <div class="modal-body"> 
      <div class="session-message"> 
       <p class="time-message">your Session will expire in         <i id="timer" class="fa fa-clock-o"> 
        <span class="expire">Minutes </span> 
       </i> 

.click proceed to stay Login.</p> 
       <p class="time-message"> 
       <b>Click Proceed to stay Login.</b> 
       </p> 
      </div> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" onclick="LogOut()">Logout</button> 
      <button type="button" class="btn btn-primary" onclick="proceed()">Proceed</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 

</html> 

的javascript:

function proceed() 
{ 
$("#myModal").toggle(); 
TimerService(); 
} 

function load(){ 
    alert(" if click proceed , timer service extended another 3 minutes else logout after 3 "); 
    $("#myModal").modal(); 

    } 

function TimerService() 
    { 
    alert("TimerService"); 
    var timer = false; 
    clearInterval(timer); 
    if (timer == false) { 
     var lastDigestRun = new Date(); 
      lastDigestRun = Date.now(); 
      var s = lastDigestRun + 3 * 60 * 1000; 
      // for reference 
      document.getElementById("demo").innerHTML = new Date(s); 
      console.info("Your logout time +" + new Date(s)); 

       timer=setInterval(function() {     
        var now = Date.now(); 
        var displaytime = now - lastDigestRun > 2 * 60 * 1000; 

        if (now - lastDigestRun > 2 * 60 * 1000) {      
         load(); 
         } 

         if (now - lastDigestRun > 3 * 60 * 1000) { 
         alert("logout"); 

         }  
       }, 60 * 1000); 

     } 
} 

Plunker演示:

https://plnkr.co/edit/qwNJF648LIvUUNT3IMkc?p=preview

+0

您清除之前创建'的setInterval()'' –

+0

仅clearInterval'清除'setInterval'定时器不'setTimeout'的。 – Bergi

+0

@Jyothi Babu Araja然后我必须清除,因为第一次,需要运行计时器加载,点击后,再次需要重新分配计时器 –

回答

2

你需要调用window.clearTimeouttimer变量取消超时。

例如,在你的TimerService()

$(document).on('click', function() { 
    clearTimeout(timer) 
} 

,并使用setTimeout()代替setInterval()。它更适合你的情况。如果你想删除保持使用setInterval(),更新上面的代码clearInterval()而不是clearTimeout()

+0

对不起,我已经更新了我的问题,我已经使用了明确的时间间隔,但是它没有清除出错的部分的代码。 –

+0

这里出了点问题仍然无法清除,如果感兴趣看这里github.com/MohamedSahir/UserSession - –

0

你有下面的代码位:

var timer = false; 
clearInterval(timer); 
if (timer == false){ 

出于显而易见的原因,这总是会评估为真。此外,clearInteval不会做任何事情,因为它是所谓虚假

+0

这里出了点问题不能清除,如果感兴趣看这里https://github.com/MohamedSahir/UserSession –

相关问题