Jquery関数が返されない

Question

私はFreeCodeCampプロジェクト - Pomedoro Countdownを書いています。 タイマーがゼロになったときに同じ場所に戻らない理由を理解するのに助けが必要です。

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 { 
 
\t -moz-box-shadow:inset 0px 1px 0px 0px #f5978e; 
 
\t -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e; 
 
\t box-shadow:inset 0px 1px 0px 0px #f5978e; 
 
\t background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f)); 
 
\t background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%); 
 
\t background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%); 
 
\t background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%); 
 
\t background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%); 
 
\t background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%); 
 
\t filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0); 
 
\t background-color:#f24537; 
 
\t -moz-border-radius:38px; 
 
\t -webkit-border-radius:38px; 
 
\t border-radius:38px; 
 
\t border:1px solid #000000; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
\t color:#fff200; 
 
\t font-family:Arial; 
 
\t font-size:15px; 
 
\t font-weight:bold; 
 
\t padding:3px 15px; 
 
\t text-decoration:none; 
 
\t text-shadow:0px 1px 0px #810e05; 
 
} 
 
.myButton:hover { 
 
\t background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537)); 
 
\t background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%); 
 
\t background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%); 
 
\t background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%); 
 
\t background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%); 
 
\t background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%); 
 
\t filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0); 
 
\t background-color:#c62d1f; 
 
} 
 
.myButton:active { 
 
\t position:relative; 
 
\t 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>

"タイマー（）" 関数を呼び出した後、それがなぜ、ここに戻ってきて文句を言いませんか？

ありがとうございました！ここで

Answer 1

は単に 'ハイ' ボタンをクリックし

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; 
    }); 
}); 

this plunkerを試してみてください。あなたが割り当てている