Question

我创建了一个简单的定时服务。在计时器服务中，我每分钟都在监视用户。

页面加载时，设置3分钟以获取注销警报，在1分钟之前，这意味着在点击“继续”按钮时获得引导警告2分钟，它将清除当前间隔并再次分配3分钟，否则， 3分钟后收到警告提醒退出。

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

代码中的错误。

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@4.0.0-alpha.4" 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="bootstrap.js@3.3.6" 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

Answer 1

您需要在timer变量上调用window.clearTimeout来取消超时。

例如，在TimerService()

中

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

并使用setTimeout()代替setInterval()。它更适合您的背景。如果您想继续使用setInterval()，请使用clearInterval()代替clearTimeout()更新上面的代码。

Answer 2

你有以下代码：

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

由于显而易见的原因，这总是评估为真。此外，clearInteval将不执行任何操作，因为它在false

上调用

为什么clearInterval没有清除setInterval定时器

2 个答案: