Question

我正在写一个FreeCodeCamp项目 - 一个Pomedoro倒计时。我需要帮助来理解为什么当计时器到达零时它不会返回到同一个地方。

var sessionLength=25;
var breakLength=5;
var sound = document.getElementById("audio");
var timer=10;
var count=breakLength*60;

$(document).ready(function(){

  function timer()
  {
  
  count=count-1;
  if (count <= 0)
  {
     $("#counterShow").html("00:00");
   //    clearInterval(counter);
     console.log("hey");
    
  }
 $("#counterShow").html(Math.floor(count/60)+":"+count%60);
  //Do code for showing the number of seconds here
}
  
     $("img").click(function(){          
       counter=setInterval(timer, 1000); //1000 run ,every 1 second
       count=sessionLength*60;
       timer=10;
       timer();   // <<----- HERE!
       console.log("Check if timer returned and play sound");
       sound.play()
    });
});

$("#sessionMinus").click(function(){
 
  if(sessionLength>1){
    sessionLength--;      
  }
  $("#sessionShow").html(sessionLength);
});

$("#sessionPlus").click(function(){     
    sessionLength++;
  $("#sessionShow").html(sessionLength);
});

$("#breakMinus").click(function(){
 
  if(breakLength>1){
   breakLength--;      
  }
  $("#breakShow").html(breakLength);
});

$("#breakPlus").click(function(){    
    breakLength++;
  $("#breakShow").html(breakLength);
});

body{
  font-family: 'Sedgwick Ave', cursive;
  background-color:yellow;
}
.imageArea{
  text-align:center;
  margin:auto auto;
  width:100%;
}
.image{
  margin:auto auto;
}
h3{
  position:absolute;
  top:282px;
  left:5px;
  width:100%;
}
#sessionLength{
  margin-top:20px;
  text-align:center;
  width:30%;
  float:left;
  margin-left:15%;
}
#breakLength{
  margin-top:20px;
  text-align:center;
  width:30%;
  float:right;
  margin-right:15%;
}


.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24537;
	-moz-border-radius:38px;
	-webkit-border-radius:38px;
	border-radius:38px;
	border:1px solid #000000;
	display:inline-block;
	cursor:pointer;
	color:#fff200;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:3px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
	background-color:#c62d1f;
}
.myButton:active {
	position:relative;
	top:1px;
}
@media only screen and (max-device-width: 480px) {
  h1{
    font-size:20px;
  }
  #sessionLength{
  margin-top:20px;
  text-align:center;
  width:37%;
  float:left;
  margin-left:5%;
}
#breakLength{
  margin-top:20px;
  text-align:center;
  width:37%;
  float:right;
  margin-right:5%;
}
  h3{
  position:absolute;
  top:254px;
  left:3px;
  width:100%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet"> 
   
  </head>
  <body>
     
      <audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>
    <a onclick="PlaySound()"></a>
    <script>
   
    </script>
    
    <div id="sessionLength" > 
      <h1> Session length </h1>
      <button style="display:inline" class="myButton" id="sessionMinus">-</button>
         <p id="sessionShow" style="display:inline"  >25</p>
           <button style="display:inline"  class="myButton" id="sessionPlus">+</button>
      </div>
    
    <div id="breakLength">
      <h1> Break length</h1>
      <button style="display:inline" class="myButton" id="breakMinus">-</button>
      <p id="breakShow" style="display:inline">5</p>
         <button style="display:inline"  class="myButton" id="breakPlus">+</button>
    </div>
    
    <div class=imageArea>
    <div class="image">
      <img src=https://image.ibb.co/nLqzma/pom.png />
      <h3 id="counterShow"> 00:00</h3>
      
    </div>
    </div>
  </body>
</html>

在调用“timer（）”函数后，它不会回到这里，为什么？

Answer 1

此处尝试this plunker

var sessionLength=25;
var breakLength=5;
var sound = document.getElementById("audio");
var timer=10;
var count=breakLength*60;

$(document).ready(function(){
    function checkCount(){
      count=count-1;
      if (count <= 0){
        $("#counterShow").html("00:00");
        clearInterval(counter);
        console.log("hey");

        console.log("Check if timer returned and play sound");
        sound.play()
      }

      $("#counterShow").html(Math.floor(count/60)+":"+count%60);
    }

     $(".img").click(function(){
        counter=setInterval(checkCount, 1000); //setInterval is an async function. It returns immediately, and your program continues running from the next line. The function checkCount is called everyone 1000ms. 
        count=sessionLength*60;
        timer=10;
    });
});

只需点击“hi”按钮即可。

Jquery函数没有返回

1 个答案: