Speedy setInterval

Question

我正在尝试使用setInterval（第一次）来增加分数并且它运行良好，除了由于某种原因它继续加速。

在下面的示例中，每次单击按钮时，分数都会更快地增加。这就像50正在减少，为什么？

感谢任何帮助，谢谢。

var scoreTimer;
var myScore = 0;
var scoreIncrement = 0;

function increaseScore() {
  scoreCountDown(10);
}


//SCORING
function scoreCountDown(scoreAmt) {
  scoreIncrement = scoreAmt
  scoreTimer = setInterval(updateScore, 50);
}

//UPDATES SCORE on a Set Interval
function updateScore() {
  if (scoreIncrement > 0) {
    myScore += 1
    scoreText.innerHTML = "Score " + myScore;
    --scoreIncrement
  } else {
    clearInterval(updateScore)
  }
}

<button onclick="increaseScore()">Add Score</button>
<br>
<span id="scoreText">000</span>

Answer 1

您没有正确清理间隔。请尝试以下方法：

clearInterval(scoreTimer);

我已经添加了一些时序日志来验证。

＆＃13;

＆＃13;

var scoreTimer;
var myScore = 0;
var scoreIncrement = 0;

function increaseScore() {
  scoreCountDown(10);
}


//SCORING
function scoreCountDown(scoreAmt) {
  scoreIncrement = scoreAmt
  console.time('timer');
  scoreTimer = setInterval(updateScore, 50);
}

//UPDATES SCORE on a Set Interval
function updateScore() {
  if (scoreIncrement > 0) {
    myScore += 1
    scoreText.innerHTML = "Score " + myScore;
    --scoreIncrement
  } else {
    console.timeEnd('timer');
    clearInterval(scoreTimer)
  }
}

＆＃13;

<button onclick="increaseScore()">Add Score</button>
<br>
<span id="scoreText">000</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为clearInterval没有被正确调用。 要解决此问题，请更改

clearInterval(updateScore)

到

clearInterval(scoreTimer)

在线查看 - https://plnkr.co/edit/0xmFC3rN5jciroYPjHtQ?p=preview

Answer 3

您正在为clearInterval函数提供错误的参数。 clearInterval接受setInterval分配给的变量。因此，除了updateScore，您应该写scoreTimer

clearInterval(scoreTimer);

如果您提供了错误的参数，则clearInterval无法正常工作，事实上，它并未清除之前的setInterval变量。因此，当您第二次按下该按钮时，scoreIncrement再次设置为10，并且两个setIntervals同时工作以增加myScore。所以你的递增速度加倍了。当你第三次按它时，你的递增速度增加了三倍等等。