Question

我试图在codepen上制作一个番茄钟，我知道我的代码还不完美，但是当我点击一次时，我看到了一个非常奇怪的行为，我的开始按钮在它上面，它启动计时器。但是当我多次粉碎它时，它会变得疯狂，计时器变得越来越快，有人可以告诉我为什么以及如何避免它？

You can just go check the Codepen here

或在那里查看我的代码：

＆＃13;

let pause = "5";
let duree = "25";
let min = "5";
let nb = 0;
let go;
document.getElementById("output").innerHTML = pause;
document.getElementById("output2").innerHTML = duree;

function addOne(btn) {

  pause = pause + " + 1";

  console.log(pause);
  clearTimeout(go);

  document.getElementById("output").innerHTML = eval(pause);

  pause = eval(pause);
}


function minusOne(btn) {

  clearTimeout(go);
  if (eval(pause) == 0) {
    pause = pause + "";
  } else {
    pause = pause + " - 1";

  }

  document.getElementById("output").innerHTML = eval(pause);

  pause = eval(pause);
}


function addOne1(btn) {

  clearTimeout(go);

  min = min + " + 1";


  document.getElementById("output2").innerHTML = eval(min);
  document.getElementById("min1").innerHTML = eval(min) + ":";
  min = eval(min);

}

function minusOne1(btn) {

  if (eval(duree) == 0) {
    duree = duree + "";
  } else {
    min = min + " - 1";

  }

  document.getElementById("output2").innerHTML = eval(min);
  document.getElementById("min1").innerHTML = eval(min) + ":";
  clearTimeout(go);
  min = eval(min);

}

document.getElementById("min1").innerHTML = min + ":";
document.getElementById("sec").innerHTML = "  " + nb;


function doSomething() {



  if (nb > 0) {

    nb = nb - 1;
  } else if (min > 0) {
    nb = 59;
    min--;
  } else {
    min = pause
  }

  go = setTimeout(doSomething, 1000);
  document.getElementById("min1").innerHTML = min + ":";
  document.getElementById("sec").innerHTML = nb;

}

＆＃13;

#damn1 {
  padding-left: 50px;
}

#damn {
  padding-left: 450px;
}

#conteneur2 {
  display: flex;
}

.txt {
  color: #ffcf40;
  font-size: 45px;
}

.buto {
  border-radius: 50px;
  background: #ffcf40;
  text-decoration: none;
}

#output {
  font-size: 100px;
}

#output2 {
  font-size: 100px;
}

#bouton {
  height: 100px;
  width: 100px;
  margin-top: 200px;
}

#min1 {
  margin-top: 200px;
  font-size: 100px;
  color: #ffcf40;
}

#sec {
  color: #ffcf40;
  margin-top: 200px;
  font-size: 100px;
}

body {
  background: black;
}

#cont1 {
  display: flex;
  justify-content: center;
}

#conteneur {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.el {
  width: 100px;
  height: 100px;
  color: #ffcf40;
}

.el1 {
  width: 100px;
  height: 100px;
  color: #ffcf40;
}

#title {
  margin: 0 auto;
  text-align: center;
}

＆＃13;

<div id="title">POMODORO </div>
<div id="conteneur2">
  <div class="txt" id="damn1">Pause</div>
  <div class="txt" id="damn">Length of sessions</div>
</div>
<div id="supercont1">
  <div id="conteneur">
    <div class="el1"><input class="buto" type="button" value="-1 minute" onclick='minusOne(this)' /></div>
    <div id="output" class="el"></div>
    <div class="el1"><input class="buto" type="button" value='+1 Minute' onclick='addOne(this)' /></div>
    <div id="min1" class="el">
    </div>
    <div id="sec" class="el">
    </div>
    <div id="start"><input class="buto" type="button" id="bouton" value="START" onclick='doSomething()' /></div>
    <div class="el"><input class="buto" type="button" value='-1 Minute' onclick='minusOne1(this)' /></div>
    <div id="output2" class="el1"></div>
    <div class="el"><input class="buto" type="button" value='+1 Minute' onclick='addOne1(this)' /></div>
  </div>
</div>

＆＃13;

谢谢有人可以启发我。

Answer 1

您还需要在doSomthing函数中清除超时：

function doSomething() {
  if (nb > 0) {

    nb = nb - 1;
  } else if (min > 0) {
    nb = 59;
    min--;
  } else {
    min = pause
  }

  clearTimeout(go);
  go = setTimeout(doSomething, 1000);
  document.getElementById("min1").innerHTML = min + ":";
  document.getElementById("sec").innerHTML = nb;

}

Updated Pen

Answer 2

您必须清除超时或不为每次点击再次设置超时。我告诉你后一个。

Html：

<div id="title">POMODORO </div>
<div id="conteneur2">
  <div class="txt" id="damn1">Pause</div>
  <div class="txt" id="damn">Length of sessions</div>
  </diV>
<div id="supercont1">
<div id="conteneur">



  <div class="el1"><input class="buto" type="button" value="-1 minute" onclick='minusOne(this)'/></div>

  <div id="output" class="el"></div>

   <div class="el1"><input class="buto"   type="button" value='+1 Minute' onclick='addOne(this)'/></div>

  <div  id="min1"class="el">


  </div>

  <div id="sec" class="el">


  </div>
  <div id ="start"><input class="buto"  type="button" id="bouton" value="START" onclick='doSomethingElse()'/></div>


  <div  class="el"><input class="buto"  type="button" value='-1 Minute' onclick='minusOne1(this)'/></div>

  <div id="output2" class="el1"></div>

   <div class="el"><input class="buto"  type="button" value='+1 Minute' onclick='addOne1(this)'/></div>


</div>
</div>

JS：

let pause = "5";
let duree = "25";
let min = "5";
let nb = 0;
let go;
document.getElementById("output").innerHTML = pause;
document.getElementById("output2").innerHTML = duree;

function addOne(btn) {

 pause = pause + " + 1";

    console.log(pause);
    clearTimeout(go);

    document.getElementById("output").innerHTML = eval(pause);

 pause = eval(pause);
  }


function minusOne(btn) {

        clearTimeout(go);
    if(eval(pause) == 0){
      pause = pause + "";
    }
  else{
 pause = pause + " - 1";

  }

      document.getElementById("output").innerHTML = eval(pause);

 pause = eval(pause);
  }


function addOne1(btn) {

  clearTimeout(go);

 min = min + " + 1";


      document.getElementById("output2").innerHTML = eval(min);
          document.getElementById("min1").innerHTML = eval(min)+":";
 min = eval(min);

}
function minusOne1(btn) {

    if(eval(duree) == 0){
      duree = duree + "";
    }
  else{
 min = min + " - 1";

  }

        document.getElementById("output2").innerHTML = eval(min);
       document.getElementById("min1").innerHTML = eval(min)+ ":";
    clearTimeout(go);
min = eval(min);

}

document.getElementById("min1").innerHTML = min + ":";
document.getElementById("sec").innerHTML = "  " + nb;

function doSomethingElse(){
  if(typeof(go) !== 'undefined'){
  return;
}
  doSomething();
}
function doSomething() {



if(nb > 0) {

 nb = nb - 1;
}
  else if (min > 0) {
    nb = 59;
    min--;
  }
  else  { 
    min = pause
  }

  go = setTimeout(doSomething, 1000);
       document.getElementById("min1").innerHTML = min + ":";
document.getElementById("sec").innerHTML = nb;

}

Answer 3

实际上，您没有点击Start按钮清除之前的超时。只需点击它就可以清除它。

将其添加到内联JS中。

  <div id ="start"><input class="buto"  type="button" id="bouton" value="START" onclick='clearTimeout(go);doSomethingElse();'/></div>

该按钮上的奇怪行为

3 个答案: