Is these a way to add 1 and then after one second than add 2 and than 3 etc-CodePudding

What I am looking for would essentially be a " " to a " " command using native java script. The program simply runs an animation for a given number in which the idea of the animatio is that it adds 1 after one second, two after two seconds and keeps going in the same fashion until the animation is stopped.

var counter = 10;
var animationOn = false;
var counterAnimation;
var plusOne;

function updateCounter() {
  //update the counter value 
  var plusOne = counter  ;
  for (var i = 1; i = < 100000000;) {

  }

  //show the counter 
  var counterSpan = document.getElementById("counterHolder");
  counterSpan.innerHTML = plusOne;
}

function startCounterAnimation() {
  if (animationOn == false) {
    animationOn == true;
    counterAnimation = setInterval(updateCounter, 1000);
  }
}

function stopCounterAnimation() {
  if (animationOn == true) {
    animationOn == false;
  }
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <button onclick="startCounterAnimation();">
        Start counter animation 
    </button>
  <button onclick="stopCounterAnimation();">
        Stop counter animation
    </button>
  <span id="counterHolder">6931418</span>
</body>

</html>

CodePudding user response：

You don't need the for loop.
You should assign to the global plusOne variable, not declare a local variable in the function.
You should add counter to it, not assign that directly.
Initialize plusOne from the number already in the output span.
Since your time intervals change between each update, you can't use setInterval(). Use setTimeout() to make a different timeout each time.
Use =, not ==, to assign to the animationOn variable.

var counter;
var animationOn = false;
var counterAnimation;
var plusOne = parseInt(document.getElementById("counterHolder").innerHTML);

function updateCounter() {
  //update the counter value 
  plusOne  = counter  ;

  //show the counter 
  var counterSpan = document.getElementById("counterHolder");
  counterSpan.innerHTML = plusOne;
  counterAnimation = setTimeout(updateCounter, counter * 1000);
}

function startCounterAnimation() {
  if (!animationOn) {
    animationOn = true;
    counter = 1;
    counterAnimation = setTimeout(updateCounter, 1000 * counter);
  }
}

function stopCounterAnimation() {
  if (animationOn) {
    animationOn = false;
    clearTimeout(counterAnimation);
  }
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <button onclick="startCounterAnimation();">
        Start counter animation 
    </button>
  <button onclick="stopCounterAnimation();">
        Stop counter animation
    </button>
  <span id="counterHolder">6931418</span>
</body>

</html>

CodePudding user response：

You can´t define var onePlus in two places, instead define it once and assign a value, var is wide scoped

Also add whatever logic you need in the for loop and put the onePlus and counter as parts of the for loop

As it is now you are expecting to use the counter both outside the for loop and as the for loop middle part, which seems reduntant

Try something like(leaving the variable names as are):

var counter = 1000
for (var plusOne = 1; plusOne < counter; plusOne  ) {
    //Your logic in here

    await sleep(1000);
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}