jQuery/Javascript随机数字动画

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

有需要加以固定有代码的工作，你打算多的问题：

1. 像pie3636已经解释，一旦你有需要的话你需要拨打clearInterval(animationTimer)希望它停止。

2. 为了能够在第一个完成后生成下一个数字，请将该生成包装在函数中，而不是在上一次迭代完成时可以调用的循环中。

3. 正如我在评论中提及，元素ID必须以字母开头。

4. 当发电机停止由于持续时间会打印一些随机数，而不是所期望的一个。

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语句删除output.text().trim() === desired ||。

Answer 2

一旦你创建了一个价值setInterval，指出该功能会定期和无限期执行。要停止它，一旦你想停止，你需要拨打clearInterval(animationTimer)。

一个可能的代码做这将是：

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

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>