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 :)

IDs have to start with a letter, so `output = $('#' + i)` won't work in some browsers. Try to use something like `output = $('#output' + i)`. — Lucas S., Jul 31 '16 at 10:47

score 4 · Accepted Answer · answered Jul 31 '16 at 12:13

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

Like pie3636 already explained, you will need to call clearInterval(animationTimer) once you want it to stop.
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.
As mentioned in my comment, element IDs have to start with a letter.
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.

score 0 · Answer 2 · answered Jul 31 '16 at 10:04

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);
}

score 0 · Answer 3 · answered Jul 31 '16 at 10:29

0

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>

answered Jul 31 '16 at 10:29

Andreas

21,535
7
47
56

While you might be right about using `setTimeout` instead of `setInterval`, your code does something completely different than what the questioner wants to achieve. – Lucas S. Jul 31 '16 at 10:44
@LucasS. It does exactly what the OP has ask for: "_So what I'm trying to do is generate 12 like the above example, wait for it to complete then generate 54 etc..._" – Andreas Jul 31 '16 at 10:58
It generates the numbers, but not like the example. Looking at his code he tries to: 1. Print each number to a different element `output = $('#' + i)`. 2. Generate random numbers and either stop at the number taken from the array or after a duration. (Take a look at the fiddle, the OP linked. Basically he copied that and put a loop around it) – Lucas S. Jul 31 '16 at 11:29

jQuery/Javascript Random Number Animation

3 Answers3