Jquery function isn't returning

Question

I'm writing a FreeCodeCamp project - a Pomedoro Countdown. I need help in understanding why it does not return to the same place when the timer reaches zero.

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>

After calling "timer()" function, it wont come back here, why?

You are assigning `timer=10` so timer is a number and not a function... — Dario, Aug 04 '17 at 16:23
Please don't link to 3rd party sites for your code. Those links can become dead over time and then your question can become meaningless to others. Just create a code snippet right here. — Scott Marcus, Aug 04 '17 at 16:28
re-reading this i'm not sure that the dupe is quite as relevant as I initially thought, but there are *a lot* of issues in that code, and given the question about why the code isn't returning to a particular position *after* an asynchronous call, the linked duplicate is certainly relevant reading. — zzzzBov, Aug 04 '17 at 17:42

Jerinaw · Answer 1 · 2017-08-04T17:42:55.527

0

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

Just click the 'hi' button.

edited Aug 04 '17 at 17:42

answered Aug 04 '17 at 16:32

Jerinaw

5,260
7
41
54

I tried it but it doesn't work. When it reach 00:00 it won't display the console message and will not play the sound. – dave keissar Aug 04 '17 at 17:14
It shows a timer that counts down based on the code you posted. I didn't added all the extra stuff that you have since I don't have access to w.e resources you do. It's meant to be an example for you to learn from. – Jerinaw Aug 04 '17 at 17:15
But the timer worked also before.. nothing changed. The problem that i need help with is to go back to the line that display the console and play the sound after the timer reach zero – dave keissar Aug 04 '17 at 17:34
You can't go back to that line. setInterval is asynchronous. When your condition is met (timer is 0), at that point you run your play sound code. I updated the code to do this. – Jerinaw Aug 04 '17 at 17:36

Jquery function isn't returning

1 Answers1