jQuery/Javascript随机数动画

我正在尝试制作一个动画，其中6个数字一个接一个地生成。但是我有问题。我正在使用这里的代码

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

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

var数=[12,54,32,45,21,69,20]；
对于（变量i=0；i<（numbers.length+1）；i++）{
var持续时间=2000年；
所需var=数字[i]；
输出=$（'#'+i）；
started=新日期（）.getTime（）；
animationTimer=setInterval（函数（）{
if（output.text（）.trim（）==所需的| |新日期（）.getTime（）-started>duration）{
}否则{
output.text(
'' +
Math.floor（Math.random（）*10）+
Math.floor（Math.random（）*10）
);
}
}, 100);
}

---

所以我要做的是像上面的例子一样生成12，等待它完成，然后生成54等等。。。不过我真的很挣扎。。。需要一些帮助：）

一旦在值中创建了

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

var数=[12,54,32,45,21,69,20]；
对于（变量i=0；i<（numbers.length+1）；i++）{
var持续时间=2000年；
所需var=数字[i]；
输出=$（'#'+i）；
started=新日期（）.getTime（）；
animationTimer=setInterval（函数（）{
if（output.text（）.trim（）==所需的| |新日期（）.getTime（）-started>duration）{
clearInterval（animationTimer）；//停止循环
}否则{
output.text(
'' +
Math.floor（Math.random（）*10）+
Math.floor（Math.random（）*10）
);
}
}, 100);
//一秒钟后停止动画
setTimeout（函数（）{clearInterval（animationTimer）；}，1000）；
}

我更喜欢。
原因如下：

var数=[12,54,32,45,21,69,20]；
函数printNumber（numbersToPrint）{
$（“#输出”）.text（numbersToPrint.shift（））；
if（数字打印长度）{
setTimeout（函数（）{
打印号码（numbersToPrint）；
}, 500)
}
}
printNumber（numbers.slice（））；
//PrintNumber更改传递的数组。
//numbers.slice（）“克隆”数组，因此“数字”将保持不变

#输出{
利润率：20px；
填充：20px；
背景：灰色；
边界半径：10px；
字号：80px；
宽度：80px；
颜色：白色；
}

--

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

就像已经解释过的pie3636一样，一旦想要停止，就需要调用

clearInterval（animationTimer）

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

---

正如我在评论中提到的，元素ID必须以字母开头

当生成器因持续时间而停止时，它将打印一些随机数，而不是所需的随机数

var数=[12,54,32,45,21,69,20]；
函数生成器枚举器（索引）{
所需var=数字[索引]；
var持续时间=2000年；
var output=$（'#output'+index）；//以字母开头的ID
var start=new Date（）.getTime（）；
animationTimer=setInterval（函数（）{
if（output.text（）.trim（）==所需的| |新日期（）.getTime（）-started>duration）{
clearInterval（animationTimer）；//停止循环
output.text（所需）；//打印所需数字，以防由于持续时间过期而在不同的数字处停止
生成枚举数（索引+1）；
}否则{
output.text(
'' +
Math.floor（Math.random（）*10）+
Math.floor（Math.random（）*10）
);
}
}, 100);
}
生成枚举数（0）
.output{
利润率：20px；
填充：20px；
背景：灰色；
边界半径：10px；
字号：80px；
宽度：80px；
颜色：白色；
浮动：左；
}

--
--
--
虽然您使用
setTimeout
而不是
setInterval
可能是正确的，但您的代码所做的与提问者想要实现的完全不同。@LucasS。它完全符合OP的要求：“所以我要做的是像上面的例子一样生成12，等待它完成，然后生成54等等。”它生成数字，但不像这个例子。看着他的代码，他试图：1。将每个数字打印到不同的元素
输出=$（'#'+i）
。2.生成随机数，并在从数组中获取的数字处停止，或在持续时间后停止。（看看fiddle，OP链接。基本上他复制了它并在它周围放了一个循环）id必须以字母开头，所以
output=$（'#'+i）
在某些浏览器中不起作用。尝试使用类似于
output=$（'#output'+i）
的方法。