var games = [];
var numbers_to_letters = ["one", "two", "three", "four", "five", "six"]
function Game(){
roll_animation();
}
$("#roll_dice").click(function(){
games.push(new Game());
});
function roll_animation(){
for (var i = 0; i < 100; i++){
for (var j = 0; j < 5; j++){
(function(ind){
window.setTimeout(function(){
$(".btn.btn-die").addClass(numbers_to_letters[ind+1]).removeClass(numbers_to_letters[ind]);
}, 20 * (ind + 1));
})(j);
}
$(".btn.btn-die").addClass("one").removeClass("six");
}
}
除非再次按下按钮，否则第一个循环的最后一行不会执行，导致第二个循环仅运行一次。（它需要重设才能再次工作）为什么最后一行总是不执行？
这似乎是setTimeout()功能稍后运行的异步代码的问题，因此与循环中的其他代码不同步。
有问题的代码行：
$(".btn.btn-die").addClass("one").removeClass("six");
运行正常。但是，由于这些setTimeout()调用是安排在稍后的某个计时器上执行的，因此它们都在上一行运行之后全部运行。因此，这行代码开始运行，然后setTimeout()计时器开始触发，并且以上行的效果被覆盖。这就是您的代码指示它执行的操作。
如果放慢时间，您可以在此鳕鱼演示中看到这里发生的情况：http : //jsfiddle.net/jfriend00/tqYq7/
如果您要使上面的代码行在最后一个计时器触发后运行，那么您需要编写代码来执行此操作，而不是现在编写该代码。对于我来说，目前尚不清楚您正在尝试使用此行代码做什么，因此我不确定确切要推荐什么。
有人可能会问为什么还要设置500个计时器，其中大多数计时器将在完全相同的时间启动并运行完全相同的代码？当然，有更有效的方法可以循环运行某些内容。如果您真正想做的是一次运行一次内部动画100次，那么您将不得不完全不同地编写代码，因为您现在要做的是设置100个相同计时器的副本，所有这些计时器都计划运行同时关闭。
这是一个演示程序的另一种演示方法，它没有您遇到的问题。
工作演示：http : //jsfiddle.net/jfriend00/Zsa8m/
var games = [];
var numbers_to_letters = ["one", "two", "three", "four", "five", "six"];
function Game(){
roll_animation();
}
$("#roll_dice").click(function(){
games.push(new Game());
});
function roll_animation(){
var cntr = 0;
function next() {
var die = cntr % 6;
var nextDie = (die + 1) % 6;
$(".btn.btn-die")
.addClass(numbers_to_letters[nextDie])
.removeClass(numbers_to_letters[die]);
++cntr;
// keep going as long as cntr < 100 and we aren't on number 1
// so that the die always end on 1
if (cntr < 100 || nextDie != 0) {
setTimeout(next, 50);
}
}
next();
}
您显然可以更改常数以适合您的目的。
仅出于笑容，这是一个随机滚动而不是顺序滚动的版本：http : //jsfiddle.net/jfriend00/NSW8U/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句