javascript - 在 RUN 和 RESET JS 之间切换计时器

Question

我想做一个简单的计时器，它可以从 25 运行到 0，并在我们需要的时候重置。

为此，我制作了一个可点击的 div，我希望点击一次启动计时器，再点击一次将其重置为 25 并停止计时器，这可能吗？可切换的启动/重置计时器？

这是我到目前为止想出的:

HTML

<div id="result" onclick="playReset"><p id="output"></p> </div>

CSS

#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 400px;
  margin-top: 200px;
}
#result:hover {
 border: black solid;

}
#output{
  margin-left: 70px;
position: fixed;
  font-size: 60px;
}

最重要的是 JS:

var duree=25;
var toggle = true;
function playReset () {


if(toggle == true) {
 var time = setInterval(function(){ 
  duree--;

document.getElementById('output').innerHTML = duree;                   
                      }, 1000);

  toggle = false
}
else if (toggle == false) {
  clearInterval(time);
  duree = 25;
  toggle = true;
}

}
document.getElementById('output').innerHTML = duree;

谢谢，如果有人能帮我一把，我在理解 setInterval/timeout、clearInterval/timeout 时遇到了很多麻烦......

Answer 1

我稍微简化了该代码，您可以在其中使用实际的 time 变量来检查它是否正在运行。

堆栈片段

var duree = 2;
var time;
function playReset() {
  if (time) {
    clearInterval(time);
    time = null;
    duree = 25;
    document.getElementById('output').innerHTML = duree;
  } else {
    time = setInterval(function() {
      duree--;
      document.getElementById('output').innerHTML = duree;
      if (duree == 0) {
        clearInterval(time);
      }
    }, 1000);
  }
}
document.getElementById('output').innerHTML = duree;

#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 20px;
  border: transparent solid;
}

#result:hover {
  border: black solid;
}

#output {
  margin-left: 70px;
  position: fixed;
  font-size: 60px;
}

<div id="result" onclick="playReset();">
  <p id="output"></p>
</div>

---

当您以后提高技能时，您可能希望这些东西及其变量对全局环境隐藏。

使用闭包可以做这样的事情，其中​​只有函数名是公开的。

堆栈片段

(function (output,duree,time) {  //declared as static variables
  this.init_time = duree;
  this.playReset = function() { 
    if (time) {
      clearInterval(time);
      time = null;
      output.innerHTML = duree = init_time; // set init value
    } else {
      time = setInterval(function() {
        output.innerHTML = --duree;
        if (duree == 0) {
          clearInterval(time);
        }
      }, 1000);
    }
  }  
  window.playReset = this.playReset; //make it public
  output.innerHTML = duree; // set init value
  
})(document.getElementById('output'),25);  // pass in the output element and default time

#result {
  background: pink;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 20px;
  border: transparent solid;
}

#result:hover {
  border: black solid;
}

#output {
  margin-left: 70px;
  position: fixed;
  font-size: 60px;
}

<div id="result" onclick="playReset();">
  <p id="output"></p>
</div>