Question

我对JavaScript和编码一般还是很陌生。我正在创建一个动画，该动画可以扩展和收缩图像以模拟呼吸。我还添加了“呼吸计数”以计算呼吸次数。这是我用来创建呼吸计数的代码：

 <h1> Breath Number: <span id= "countingBreaths">0</span> </h1>

然后在脚本标签中：

//function for breath number increase
    var countingTo = function() {
      countingBreaths.textContent = 1 + (parseFloat(countingBreaths.textContent));

      var startCounting = setInterval(countingTo, 4000);

      var stopCounting = function () {
        clearInterval(startCounting);
      }
      stopButton.addEventListener("click", stopCounting);
    }

    startButton.addEventListener("click", countingTo);

我的问题是在parseFloat函数中。我的意图是将呼吸次数增加1（+1）。但是，相反，它使我的数字增加了一倍（1、2、4、8、16、32等）。我不确定自己做错了什么。我已经尝试了所有方法，并在此站点上寻求帮助，但是找不到任何信息。我非常感谢您的帮助！

Answer 1

如Pointy在评论setInterval中所写，将创建一个计时器，每4秒调用一次它的功能。

并且每次函数运行时您都会启动一个新计时器，因此最终您会有很多计时器。而且每一个都会增加你的呼气计数。

也许您将setInterval与setTimeout混淆了。然后，每个函数调用只会准备下一个：

var countingTo = function() {
  countingBreaths.textContent = 1 + (parseFloat(countingBreaths.textContent));

  var startCounting = setTimeout(countingTo, 4000);

…

但是您仍然会在每次函数调用时向停止按钮添加一个新的click eventListener。这意味着您的停止功能将被调用很多次。在您的示例中，它在每个创建的间隔内运行。

因此您应该将其移出countingTo函数，如下所示：

var intervalId = null
var countingTo = function() {
  countingBreaths.textContent = 1 + (parseFloat(countingBreaths.textContent));
}

var startCounting = function () {
  intervalId = setInterval(countingTo, 4000);
}

var stopCounting = function () {
  clearInterval(intervalId);
}

startButton.addEventListener("click", startCounting);
stopButton.addEventListener("click", stopCounting);

或使用setTimeout：

var timeoutId = null
var countingTo = function() {
  countingBreaths.textContent = 1 + (parseFloat(countingBreaths.textContent));

  timeoutId = setTimeout(countingTo, 4000);
}

var stopCounting = function () {
  clearTimeout(timeoutId);
}

startButton.addEventListener("click", countingTo);
stopButton.addEventListener("click", stopCounting);

此外，如果您正在制作动画，则可能需要研究requestAnimationFrame

parseFloat使动画中的操作数加倍

1 个答案: