parseFloat удваивает операнд в анимации

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

Как писал Пойнти в комментарии setInterval создаст таймер, который вызывает его функцию каждые 4 секунды.

И вы запускаете новый таймер каждый раз, когда запускается функция, так что в итоге у вас появляется много таймеров. И каждый из них увеличит ваше дыхание.

Может быть, вы запутались setInterval с setTimeout, Тогда каждый вызов функции подготовит только следующий:

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

  var startCounting = setTimeout(countingTo, 4000);

…

Но вы все равно добавляете новый clickList 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