jQueryJavascript Random Number Animation - Stack Overflow

admin管理员组

文章数量:1327932

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 /

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 plete then generate 54 etc... I'm really struggling with this though... Would love some help :)

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/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 plete then generate 54 etc... I'm really struggling with this though... Would love some help :)

• javascript
• jquery

Share Improve this question Follow asked Jul 31, 2016 at 9:53 jnDnyjnDny 5511 gold badge11 silver badge66 bronze badges 1

• 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. Commented Jul 31, 2016 at 10:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 ment, 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./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.

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

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">--</div>

本文标签： jQueryJavascript Random Number AnimationStack Overflow