停止额外的间隔

Question

我已经阅读了一些内容，但仍然不知道如何阻止它。

我的程序非常简单。当我按开始键时，每1秒将出现3个随机数。但是，每当我多次按下start时，setInterval（）也会运行多次。

如何确保每当我再次按Start时，仅运行一个setInterval（）。我试图在setInterval方法之前添加clearInterval方法，但无济于事。

function start() {
  document.getElementById("number1").disabled = false;
  document.getElementById("number2").disabled = false;
  document.getElementById("number3").disabled = false;
  chosennumber = prompt("choose a number between 0 to 9");
  scorenum2 = 0;
  
  if (/^([1-9])$/.test(chosennumber) == false || chosennumber.trim() == "") {
    alert("Enter only intergers 1 to 9");
  } else {

    document.getElementById("chosennum").innerHTML = chosennumber;
    document.getElementById("scorenum").innerHTML = scorenum2;

    interval = setInterval(start2, 1000);
  }
}

function start2() {
  rand = Math.floor(Math.random() * 9);
  rand2 = Math.floor(Math.random() * 9);
  rand3 = Math.floor(Math.random() * 9);

  document.getElementById("number1").innerHTML = rand;
  document.getElementById("number2").innerHTML = rand2;
  document.getElementById("number3").innerHTML = rand3;
}

#number1 {
  float: left;
  color: red;
  font-size: 200px;
  border: none;
  background-color: white;
}

#number2 {
  float: left;
  color: orange;
  font-size: 200px;
  border: none;
  background-color: white;
}

#number3 {
  float: left;
  color: blue;
  font-size: 200px;
  border: none;
  background-color: white;
}

#chosennum {
  color: green;
}

#scorenum {
  color: red;
}

<input type="submit" value="Start Game" onClick="start()">

<br>
<br>
<div id="">
  <h1>Your chosen number is: <span id="chosennum"> </span></h1>
  <h1>Your score so far: <span id="scorenum"> </span></h1>
</div>

<div id=""></div>

<button id="number1"></button>
<button id="number2" ></button>
<button id="number3"></button>

Answer 1

只需输入一个布尔值以确保只有一个间隔运行。

var interval = false;
function start() {
  document.getElementById("number1").disabled = false;
  document.getElementById("number2").disabled = false;
  document.getElementById("number3").disabled = false;
  chosennumber = prompt("choose a number between 0 to 9");
  scorenum2 = 0;
  
  if (/^([1-9])$/.test(chosennumber) == false || chosennumber.trim() == "") {
    alert("Enter only intergers 1 to 9");
  } else {

    document.getElementById("chosennum").innerHTML = chosennumber;
    document.getElementById("scorenum").innerHTML = scorenum2;

    if(interval === false) {
        interval = setInterval(start2, 1000);
    }
  }
}

function start2() {
  rand = Math.floor(Math.random() * 9);
  rand2 = Math.floor(Math.random() * 9);
  rand3 = Math.floor(Math.random() * 9);

  document.getElementById("number1").innerHTML = rand;
  document.getElementById("number2").innerHTML = rand2;
  document.getElementById("number3").innerHTML = rand3;
}

#number1 {
  float: left;
  color: red;
  font-size: 200px;
  border: none;
  background-color: white;
}

#number2 {
  float: left;
  color: orange;
  font-size: 200px;
  border: none;
  background-color: white;
}

#number3 {
  float: left;
  color: blue;
  font-size: 200px;
  border: none;
  background-color: white;
}

#chosennum {
  color: green;
}

#scorenum {
  color: red;
}

<input type="submit" value="Start Game" onClick="start()">

<br>
<br>
<div id="">
  <h1>Your chosen number is: <span id="chosennum"> </span></h1>
  <h1>Your score so far: <span id="scorenum"> </span></h1>
</div>

<div id=""></div>

<button id="number1"></button>
<button id="number2" ></button>
<button id="number3"></button>

Answer 2

只要跟踪id函数返回的setInterval（如果存在该ID，就不要再次调用它）。

const start = (function(){
 let id;
 function start() {
  document.getElementById("number1").disabled = false;
  document.getElementById("number2").disabled = false;
  document.getElementById("number3").disabled = false;
  chosennumber = prompt("choose a number between 0 to 9");
  scorenum2 = 0;
  
  if (/^([1-9])$/.test(chosennumber) == false || chosennumber.trim() == "") {
    alert("Enter only intergers 1 to 9");
  } else {

    document.getElementById("chosennum").innerHTML = chosennumber;
    document.getElementById("scorenum").innerHTML = scorenum2;

    if(!id){
    id = setInterval(start2, 1000);
    }
    
  }
}

function start2() {
  rand = Math.floor(Math.random() * 9);
  rand2 = Math.floor(Math.random() * 9);
  rand3 = Math.floor(Math.random() * 9);

  document.getElementById("number1").innerHTML = rand;
  document.getElementById("number2").innerHTML = rand2;
  document.getElementById("number3").innerHTML = rand3;
}
return start;
})();

#number1 {
  float: left;
  color: red;
  font-size: 200px;
  border: none;
  background-color: white;
}

#number2 {
  float: left;
  color: orange;
  font-size: 200px;
  border: none;
  background-color: white;
}

#number3 {
  float: left;
  color: blue;
  font-size: 200px;
  border: none;
  background-color: white;
}

#chosennum {
  color: green;
}

#scorenum {
  color: red;
}

<input type="submit" value="Start Game" onClick="start()">

<br>
<br>
<div id="">
  <h1>Your chosen number is: <span id="chosennum"> </span></h1>
  <h1>Your score so far: <span id="scorenum"> </span></h1>
</div>

<div id=""></div>

<button id="number1"></button>
<button id="number2" ></button>
<button id="number3"></button>

Answer 3

您只设置了一个全球可用名称clear_interval 首先，您应该设置

clear_inteval = true

然后....

if(clear_interval)
{
    interval = setInterval(start2, 1000);
    clear_interval = false
}

您的问题将会解决。

Answer 4

如果将来要使用相同的时间间隔变量添加不同的时间间隔，可以在分配新的时间间隔之前clearInterval(intervalVariable)。 如果您确定间隔只是一遍又一遍地创建的间隔，则还可以使用相同的方法或设置一个标志来在创建新间隔之前检查间隔。