parseFloat удваивает операнд в анимации - PullRequest
Новая
       45

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

0 голосов
/ 12 февраля 2019

Я очень плохо знаком с 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 и т. Д.).Я не уверен, что я сделал не так.Я перепробовал все и искал на этом сайте помощь, но не могу найти никакой информации.Буду очень признателен за помощь!

1 Ответ

0 голосов
/ 12 февраля 2019

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

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

Возможно, вы перепутали 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

...