jQuery/Javascript Random Number Animation

Question

I'm trying to make an animation where 6 numbers are generated one after another. However I'm having problems with it. I'm using the code from here http://jsfiddle.net/ZDsMa/1/

However I can't seem to get it to pause the loop. This is my code.

var numbers = [12,54,32,45,21,69,20];
for (var i = 0; i < (numbers.length + 1); i++) {
    var duration = 2000;
    var desired = numbers[i];

    output = $('#' + i);
    started = new Date().getTime();

    animationTimer = setInterval(function() {
        if (output.text().trim() === desired || new Date().getTime() - started > duration) {

        } else {
            output.text(
                '' +
                Math.floor(Math.random() * 10) +
                Math.floor(Math.random() * 10)
            );
        }
    }, 100);
}

So what I'm trying to do is generate 12 like the above example, wait for it to complete then generate 54 etc... I'm really struggling with this though... Would love some help :)

Answer 1

There are multiple issues that need to be fixed to have the code work as you intended:

1. Like pie3636 already explained, you will need to call clearInterval(animationTimer) once you want it to stop.

2. To be able to generate the next number after the first has finished, wrap the generation in a function instead of a loop which you can call when the previous iteration finishes.

3. As mentioned in my comment, element IDs have to start with a letter.

4. When the generator stopped due to duration it would print some random number instead of the desired one.

var numbers = [12, 54, 32, 45, 21, 69, 20];
function generateNumber(index) {
  var desired = numbers[index];
  var duration = 2000;

  var output = $('#output' + index); // Start ID with letter
  var started = new Date().getTime();

  animationTimer = setInterval(function() {
    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
      clearInterval(animationTimer); // Stop the loop
      output.text(desired); // Print desired number in case it stopped at a different one due to duration expiration
      generateNumber(index + 1);
    } else {
      output.text(
        '' +
        Math.floor(Math.random() * 10) +
        Math.floor(Math.random() * 10)
      );
    }
  }, 100);
}

generateNumber(0);

.output {
    margin: 20px;
    padding: 20px;
    background: gray;
    border-radius: 10px;
    font-size: 80px;
    width: 80px;
    color: white;
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="output" id="output0">--</div>
<div class="output" id="output1">--</div>
<div class="output" id="output2">--</div>

If you want the generator to always last for the full duration, delete output.text().trim() === desired || from the if statement in the interval code.

Answer 2

I would prefer setTimeout over setInterval.
The reason why is explained here: setTimeout or setInterval

var numbers = [12, 54, 32, 45, 21, 69, 20];

function printNumbers(numbersToPrint) {
  $("#output").text(numbersToPrint.shift());

  if (numbersToPrint.length) {
    setTimeout(function() {
      printNumbers(numbersToPrint);
    }, 500)
  }
}

printNumbers(numbers.slice());
// printNumbers changes the passed array.
// numbers.slice() "clones" the array so "numbers" will be unchanged

#output {
    margin: 20px;
    padding: 20px;
    background: gray;
    border-radius: 10px;
    font-size: 80px;
    width: 80px;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">--</div>

Answer 3

Once you have created a setInterval in a value, the function it points out is executed periodically and indefinitely. To stop it, you will need to call clearInterval(animationTimer) once you want it to stop.

A possible code doing this would be:

var numbers = [12,54,32,45,21,69,20];
for (var i = 0; i < (numbers.length + 1); i++) {
    var duration = 2000;
    var desired = numbers[i];

    output = $('#' + i);
    started = new Date().getTime();

    animationTimer = setInterval(function() {
        if (output.text().trim() === desired || new Date().getTime() - started > duration) {
            clearInterval(animationTimer); // Stops the loop
        } else {
            output.text(
                '' +
                Math.floor(Math.random() * 10) +
                Math.floor(Math.random() * 10)
            );
        }
    }, 100);

    // Stops the animation after one second
    setTimeout(function () { clearInterval(animationTimer); }, 1000);
}