为什么 clearInterval 不清除 setInterval 计时器答案

【问题标题】：Why clearInterval not clearing the setInterval timer为什么 clearInterval 不清除 setInterval 计时器
【发布时间】：2017-01-09 14:39:30
【问题描述】：

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

在页面加载时，设置了 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 演示：

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

【问题讨论】：

你在创建setInterval()之前清除
clearInterval 只清除 setInterval 计时器而不是 setTimeout 计时器。
@Jyothi Babu Araja 然后我必须清除，因为第一次，需要在加载时运行计时器，点击继续后，再次需要重新分配计时器
@Bergi：实际上并非如此：如果您没有看到警报，请尝试var t = setTimeout("alert(666)", 500);clearInterval(t);，它们是可以互换的。如果你这样做，请告诉我们奇怪的浏览器。
@JyothiBabuAraja 仍然无法清除间隔出现问题请看这里github.com/MohamedSahir/UserSession

标签： javascript jquery timer javascript-objects dom-events

【解决方案1】：

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

例如，在您的TimerService()

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

并使用setTimeout() 而不是setInterval()。它更适合您的上下文。如果您想删除 keep using setInterval()，请将上面的代码更新为 clearInterval() 而不是 clearTimeout()。

【讨论】：

对不起，我更新了我的问题，我使用了明确的间隔，但它没有清除代码中的问题。
这里出了点问题仍然无法清除，如果有兴趣请看这里 github.com/MohamedSahir/UserSession –

【解决方案2】：

你有以下代码：

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

出于显而易见的原因，这总是会被评估为真。此外， clearInteval 不会做任何事情，因为它被称为 false

【讨论】：

这里出了点问题无法清除如果有兴趣请看这里github.com/MohamedSahir/UserSession