Question

我一直在研究一个可以暂停的计时器，如果他们按下停止按钮或重置按钮，并且在倒计时达到$ minLeft = 0 $ secLeft = 0后停止。我还没有做过计时器之前，但是从我在stackoverflow上学到的东西看来，setInterval似乎是最好的选择，但我不反对做重复的setTimeout。计时器进展顺利，但我无法在任何选项中暂停。在尝试了许多不同的方向后，这是我最好的接近，但它仍然无法正常工作。有没有人看到我做错了什么。如果更容易Pomodoro Clock

，您可以在codepen上查看

function getId(){
  var $buttonID = $(event.target.id).selector;
  console.log($buttonID);
  var initialize= 0,intervalId;
  if($buttonID == "startButton")
    {
      if(initialize == 0)
        {
          var intialTime = Number($('#sesStartTime').text());
          updateCountdown(intialTime, 0);
          initialize = 1;
          $('#startButton').attr("id", "stopButton").text("Stop");
          intervalId = startTimer();
        }
      else
        {
          intervalId = startTimer();
        }
    }
  else if($buttonID == "resetButton")
    {
      stopTimer(intervalId);
      var prevTime = Number($('#sesStartTime').text());
      updateCountdown(prevTime, 0);
    }
  else if($buttonID == "stopButton")
    {
      $('#stopButton').attr("id", "startButton").text("Start");
      stopTimer(intervalId);
    } 
  else
    {
      console.log("Entered else statement for gatherTimeInfo");
      gatherTimeInfo($buttonID);
    }
  
}

function startTimer(){
  setInterval(checkFinish,1000);
}

function stopTimer(timer){
  clearInterval(timer);
  
}

function checkFinish (timer){
  var $minLeft = Number($('#countdownClock span:first-child').text())
  var $secLeft = Number($('#countdownClock span:nth-child(2)').text());
  console.log("This is minLeft: " + $minLeft + " and this is secLeft: " + $secLeft);
  
  if($minLeft ==0 && $secLeft == 0)
    {
      stopTimer(timer);
      console.log("I've finished the alert loop"); 
    }
  else
    {
      if($secLeft == 0 && $minLeft >=1)
        {
          console.log("Still more than a minute to go");
          $minLeft--;
          $secLeft = 59
          updateCountdown($minLeft, $secLeft);
        }
      else if($secLeft > 0 && $minLeft >=1)
        {
          console.log("Still more than a minute to go");
          $secLeft--;
          updateCountdown($minLeft, $secLeft);
        }
      else
        {
          console.log("Less than a minute");
          $secLeft--;
          updateCountdown($minLeft, $secLeft);
        }
    }
}

$( "button" ).click(function() {
  getId();
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="sessionBox">
                      <div class="row">
                        <div class="col-md-12">
                          <h4 class="text-center">Session Time</h4>
                        </div><!--End of col-md-12-->
                      </div><!--End of row-->
                      <div class="row">
                        <div class="col-md-4">
                           <button id="sesMinus" class="btn btn-default glyphicon glyphicon-minus"></button>
                        </div><!--End of col-md-4-->
                        <div class="col-md-4">
                           <p id="sesStartTime" class="text-center">5</p>
                        </div><!--End of col-md-4-->
                        <div class="col-md-4">
                          <button id="sesPlus" class="btn btn-default glyphicon glyphicon-plus"></button>
                        </div><!--End of col-md-4-->
                      </div><!--End of row-->
                    </div><!--End of sessionBox-->
<div id="timerBox">
   <h3 id="currentPeriod" class="text-center">Session</h3>
   <p id="countdownClock" class="text-center"><span>00</span> : <span>00</span></p>
</div><!--End of timerBox-->


<div id="interfaceBox">
                <div class="row">
                  <div class="col-md-6">
                    <div class="row">
                      <div class="col-md-6 col-md-offset-3">
                        <div id="startButtonDiv">
                          <p class="text-center"><button id="startButton" class="btn btn-default btn-block">Start</button></p>
                        </div><!--End of startButton-->
                      </div><!--End of col-md-6-->
                    </div><!--End of row-->    
                  </div><!--End of col-md-6-->
                  <div class="col-md-6">
                    <div class="row">
                      <div class="col-md-6 col-md-offset-3">
                        <div id="resetButtonDiv">
                          <p class="text-center"><button id="resetButton"  class="btn btn-default btn-block">Reset</button></p>
                        </div><!--End of resetButton-->
                      </div><!--End of col-md-6-->
                    </div><!--End of row--> 
                  </div><!--End of col-md-6-->
                </div><!--End of row-->
              </div><!--End of interfaceBox-->

Answer 1

创建一个存储计时器引用的全局变量，并从startTimer方法返回该引用

var intervalId;

function startTimer(){
  return setInterval(checkFinish,1000);
}

Answer 2

您没有从startTimer()函数返回值，因此，当您致电intervalId = startTimer();

时，intervalId未定义

无法从按钮停止setInterval或在计时器倒计时javascript后停止

2 个答案: