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

我一直在研究一个计时器，如果他们按下停止按钮或重置按钮，该计时器可以暂停，并在倒计时达到$minLeft=0$secLeft=0后停止。我以前没有做过定时器，但从我在stackoverflow上学到的东西来看，setInterval似乎是最好的选择，但我并不反对重复setTimeout。计时器运行得很好，只是我不能在任何选项中暂停它。在尝试了许多不同的方向后，这是我最接近的猜测，但仍然不起作用。有人看到我做错了什么吗。如果Pomodoro Clock 更容易，你可以在代码笔上查看

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-->