Javascript函数阻塞程序

时间:2015-08-08 22:43:21

标签: javascript jquery

我正在尝试制作一个promodoro时钟(或者在我的想象中类似的东西),一切正常,直到我在javascript中添加一个函数。

$(document).ready(function(){
  var breakTime=5;
  var session=5;
  var interval=null;
  var click=0;
  var arr=null;
  $("#rightBr").click(function(){
    breakTime++;
    $("#brTime").text(""+breakTime);
  });
  $("#leftBr").click(function(){
    if(breakTime!==0)
    {
      breakTime--;
    }
    $("#brTime").text(""+breakTime);
  });
  
  $("#rightSes").click(function(){
    session++;
$("#SesTime").text(""+session);                   
  });
  $("#leftSes").click(function(){
    if(session!==0)
      {
        session--;
      }
$("#SesTime").text(""+session);                   });
  $("#clock").click(function(){
    if(click===0)
    {
      click=1;
      $("#audio").html('<audio id="ard" src="http://www.oringz.com/oringz-uploads/sounds-917-communication-channel.mp3" type="audio/mpeg">Your browser does not support the &#60;audio&#62; element. </audio>');
      arr=[session,0,"#clock"];
      arr=alarmTime(arr);
      while(arr[0]!==0 && arr[1]!==0)
        {
          setTimeout(function(){
            arr=alarmTime(arr);
          },1000);
        }
    $("#clock").text("Stop");
    $("audio").get(0).play();
    interval=setInterval(function(){
      $("audio").get(0).play();
    },breakTime*60*1000);
    }else{
      click=0;
       clearInterval(interval);
      arr[0]=0;
      arr[1]=0;
    }
  });
  function alarmTime(arr){
  var minute=arr[0];
  var second=arr[1];
  var id=arr[2];
  $(id).text(""+minute+":"+second);
  if(second===0)
    {
      minute--;
      second=59;
    }else{
      second--;
    }
  if(minute===0 &&& second===0)
    {
      setTimeout(function(){
         $(id).text("Stop");
      },1000);
    }
  return [minute,second,id];
};
});
body{
  background-color:black;
  color:pink;
}
h1{
  width:500px;
  text-align:center;
  color:yellow;
  margin:0 auto;
}
.tot{
  width:100%;
  text-align:center;
}
.data{
  text-align:center;
  width:200px;
  margin: 0 auto;
  border:2px solid red;
  display:inline-block;
}
#break{
  display: inline;
  border:2px solid red;
}
#time{
  display: inline;
  border:2px solid red;
}
#brTime{
  display:inline;
}

.data2{
  width:200px;
  margin:0 auto;
  border:2px solid red;
  text-align:center;
  display:inline-block;
}
#SesTime{
  display:inline;
}
#clock{
  border:2px solid yellow;
  width:200px;
  height:35px;
  font-size:25px;
  margin:0 auto;
  
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Awsome Pomodoro Clock</h1>
<div class="tot">
<div class="data">
  <div id="break">break length</div>
  
  <br>
  <button type="button" id="leftBr">&lt;</button>
  <div id="brTime" >5</div>
  <button type="button" id="rightBr">&gt;</button>
</div>

<div class="data2">
  <div id="break">session length</div>
  
  <br>
  <button type="button" id="leftSes">&lt;</button>
  <div id="SesTime" >5</div>
  <button type="button" id="rightSes">&gt;</button>
</div>
  <div id="audio"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="clock">
  Start
  </div>

如果我删除:

function alarmTime(arr){
  var minute=arr[0];
  var second=arr[1];
  var id=arr[2];
  $(id).text(""+minute+":"+second);
  if(second===0)
    {
      minute--;
      second=59;
    }else{
      second--;
    }
  if(minute===0 &&& second===0)
    {
      setTimeout(function(){
         $(id).text("Stop");
      },1000);
    }
  return [minute,second,id];
};

它有效(按钮不响应.click功能)。

1 个答案:

答案 0 :(得分:1)

这个

if(minute===0 &&& second===0)

if(minute===0 && second===0)

为什么你有3&amp;&amp;&amp; ?