presseFloat 在动画中加倍操作数

Question

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

 <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 秒调用一次它的函数。

每次函数运行时你都会启动一个新的计时器，所以最终你会有很多计时器。每一个都会增加你的 breathCount。

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

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

  var startCounting = setTimeout(countingTo, 4000);

…

但是您仍然会在每次函数调用时向停止按钮添加一个新的点击事件监听器。这意味着你的停止函数会被调用很多次。在您的示例中，它针对每个创建的间隔运行。

所以你应该像这样将它移出你的 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

presseFloat 在动画中加倍操作数

parseFloat is doubling operand in animation

javascript

parsefloat