Question

我试图制作动画，其中一个接一个地生成6个数字。但是我遇到了问题。我正在使用此处的代码 http://jsfiddle.net/ZDsMa/1/

然而，我似乎无法让它暂停循环。这是我的代码。

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

所以我想要做的就是像上面的例子一样生成12，等待它完成然后生成54等...我真的很挣这个但是...会喜欢一些帮助：）

Answer 1

要使代码按预期工作，需要修复多个问题：

与 pie3636 已经解释过一样，一旦您想要停止，您就需要致电clearInterval(animationTimer)。
为了能够在第一个完成后生成下一个数字，将生成包装在函数中而不是在上一次迭代完成时可以调用的循环。
正如我的评论所述，元素ID必须以字母开头。
当发电机因持续时间而停止时，它会打印一些随机数而不是所需的数字。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您希望生成器始终持续整个持续时间，请从区间代码中的if语句中删除output.text().trim() === desired ||。

Answer 2

在值中创建print(nrow(m)) 23070 print(ncol(m)) 67后，它指出的函数会定期无限期执行。要停止它，您需要在需要停止后拨打setInterval。

执行此操作的可能代码是：

clearInterval(animationTimer)

Answer 3

我希望setTimeout超过setInterval 这里解释了原因：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>

jQuery / Javascript随机数动画

3 个答案: