0

Ich habe einen einfachen Timer-Dienst erstellt. Im Timer-Dienst überwache ich den Benutzer für jede Minute.Warum clearInterval den setInterval-Timer nicht löscht

Während des Ladens der Seite haben Sie 3 Minuten eingestellt, um eine Abmeldung zu erhalten und vor 1 Minute 2 Minuten, um eine Bootstrap-Warnung zu erhalten. Klicken Sie auf die Schaltfläche Fortfahren, um die aktuellen Intervalle zu löschen und erneut 3 Minuten zu vergeben , erhalten Sie eine Warnmeldung zum Abmelden nach 3 Minuten.

Zum ersten Mal funktioniert es gut, beim Klicken auf die Schaltfläche fortfahren, ist es nicht den Wert für den Benutzer neu zuweisen. Für die 3. Minute selbst, zeigt es die Abmeldung.

Wo ist falsch in der Art von Code.

<!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 Demo:

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

+0

Sie löschen vor dem Erstellen von 'setInterval()' –

+0

'ClearInterval' löscht nur' setInterval' Timer nicht 'setTimeout' Einsen. – Bergi

+0

@Jyothi Babu Araja dann, wo ich muss, weil zum ersten Mal, müssen Sie den Timer auf laden, nach dem Klick fortzufahren, müssen erneut den Timer neu zuweisen –

Antwort

2

Sie benötigen window.clearTimeout auf der timer Variable nennen das Timeout abzubrechen.

Zum Beispiel in Ihrem TimerService()

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

und setTimeout() statt setInterval() verwenden. Es ist besser für Ihren Kontext geeignet. Wenn Sie entfernen möchten, verwenden Sie setInterval(), aktualisieren Sie den obigen Code mit clearInterval() anstelle von clearTimeout().

+0

Sorry, ich habe meine Frage aktualisiert, ich habe klare Intervall verwendet, aber es nicht etwas gelöscht ging in dem Stück schief gelaufen von Code. –

+0

Etwas schief ging hier noch nicht in der Lage zu klären, ob Interesse hier github.com/MohamedSahir/UserSession - –

0

Sie haben folgendes Stück Code:

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

Aus offensichtlichen Gründen dies wird immer als wahr zu bewerten. Darüber hinaus wird clearInteval nichts tun, da es auf false aufgerufen wird

+0

etwas schief gehen hier nicht in der Lage, wenn Interesse hier https://github.com/MohamedSahir/UserSession suchen –