快速设置间隔

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);

我也添加了一些时间日志来验证。

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)
  }
}

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

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。所以你的递增速度加倍了。当你第三次按下它时，你的递增速度增加了三倍，依此类推。

快速设置间隔

Speedy setInterval

javascript

setinterval

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