clearInterval加速我的番茄钟计时器

Question

我似乎无法理解，因为我对JS Timers很陌生，但似乎clearInterval在按下时会快速调用我的代码两倍。

＆＃13;

＆＃13;

var running = false;
var minutes = 10;
var seconds = 0;


var countdown = function(){
  //If the time is 1 second away from 0 , display 00:00 and break
  if(minutes === 0 && seconds === 1){
    $(".time").html("00:00");
    console.log("1")
  }//If seconds is 0 but minutes isn't , reduce minute
  else if(minutes > 0 && seconds === 0){
    minutes--;
    seconds = 59; 
    console.log("2")
    $(".time").html(minutes+ ":" +seconds );
}else if(seconds > 0){
    seconds--;
      $(".time").html(minutes+ ":" +seconds );
}
};

$(".start").click(function(){
  if(running === false){
   var run = setInterval(countdown, 1000);
    $(".start").html("Stop");
    running = true;
  }else{
    running = false;
    var stop = clearInterval(run);
    stop();
     $(".start").html("Start");
  }
});
  
  

    

＆＃13;

body{
  background:#222222;
}
.main-container{
  background: #1e1e1e;
  width:600px;
  height:800px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
-webkit-box-shadow: 0px 4px 12px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 12px -1px rgba(0,0,0,0.75);
box-shadow: 0px 4px 12px -1px rgba(0,0,0,0.75);
}
.inner-circle{
  border-radius: 50%;
  width:300px;
  height:300px;
  background:white;
  text-align:center;
  margin: 0 auto;
  margin-top: 25%;
}
.inner-circle h1{
  position: relative;
  width: 100%;
  height: auto;
  top: 37%;
  margin-top: -10px;
  text-align: center;
}
.start{
  display:block;
  margin:0 auto;
  margin-top:10%;
  width: 200px;
  height:50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
  <div class="inner-circle">
    <h1>Time Left</h1>
    <h1 class="time">10:00</h1>
  </div>
  <button class="start">Start</button>
</div>

＆＃13;

＆＃13;

＆＃13;

提前感谢任何帮助！

Answer 1

您可以使用

var run;  // <<<< here
$(".start").click(function(){
  if(running === false){
    run = setInterval(countdown, 1000); // remove `var from` here
    $(".start").html("Stop");
    running = true;
  }else{
    running = false;
    clearInterval(run);  //<<<< remove `var stop =` from here
    stop();
     $(".start").html("Start");
  }
});

＆＃13;

＆＃13;

var running = false;
var minutes = 10;
var seconds = 0;


var countdown = function(){
  //If the time is 1 second away from 0 , display 00:00 and break
  if(minutes === 0 && seconds === 1){
    $(".time").html("00:00");
    console.log("1")
  }//If seconds is 0 but minutes isn't , reduce minute
  else if(minutes > 0 && seconds === 0){
    minutes--;
    seconds = 59; 
    console.log("2")
    $(".time").html(minutes+ ":" +seconds );
}else if(seconds > 0){
    seconds--;
      $(".time").html(minutes+ ":" +seconds );
}
};
var run;
$(".start").click(function(){
  if(running === false){
   run = setInterval(countdown, 1000);
    $(".start").html("Stop");
    running = true;
  }else{
    running = false;
    clearInterval(run);
    stop();
     $(".start").html("Start");
  }
});
  
  

    

＆＃13;

body{
  background:#222222;
}
.main-container{
  background: #1e1e1e;
  width:600px;
  height:800px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
-webkit-box-shadow: 0px 4px 12px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 12px -1px rgba(0,0,0,0.75);
box-shadow: 0px 4px 12px -1px rgba(0,0,0,0.75);
}
.inner-circle{
  border-radius: 50%;
  width:300px;
  height:300px;
  background:white;
  text-align:center;
  margin: 0 auto;
  margin-top: 25%;
}
.inner-circle h1{
  position: relative;
  width: 100%;
  height: auto;
  top: 37%;
  margin-top: -10px;
  text-align: center;
}
.start{
  display:block;
  margin:0 auto;
  margin-top:10%;
  width: 200px;
  height:50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-container">
  <div class="inner-circle">
    <h1>Time Left</h1>
    <h1 class="time">10:00</h1>
  </div>
  <button class="start">Start</button>
</div>

＆＃13;

＆＃13;

＆＃13;