我可以在for循环中设置多个window.setTimeout事件吗？

Question

这是我从中复制的一段代码
http://www.schillmania.com/content/projects/javascript-animation-1/demo/
非常简单的JS动画：

function doMove() {
  foo.style.left = parseInt(foo.style.left)+1+'px';
  setTimeout(doMove,20); 
}

这很好。 但是，如果我这样更改它：

function doMove() {
   for (var i=0; i<1000; i++) {
       setTimeout(function(){foo.style.left = parseInt(foo.style.left)+1+'px';},20*i);
   }
}

因此，根本没有动画。 据我所知，只要调用setTimeout，JS引擎就会将这些事件推送到队列中。 所以我只是不明白为什么这行不通。

Answer 1

将其包装在封口中以保留“当时”的i值

for (var i=0; i<1000; i++){
    (function(i){
        setTimeout(function(){
            foo.style.left = parseInt(foo.style.left)+1+'px';
        },20*i);
    }(i));
}

Answer 2

function doMove() {
  foo.style.left = parseInt(foo.style.left)+1+'px';
  setTimeout(doMove,20); 
}

回调函数将仅由setTimeout执行一次，上述代码有效，因为回调函数是它自身的函数，因此称为递归。

Answer 3

function doMove() { for (var i=0; i<1000; i++)
setTimeout(function(){foo.style.left = parseInt(foo.style.left)+1+'px';},20*i); } 

for循环后，有不必要的分号；

Answer 4

在for循环之后，您使用了分号。 因此，循环运行1000次，而setTimeout运行一次。

// Runs for 1000 times
for (var i=0; i<1000; i++);

// Runs one time moving foo by 1px
setTimeout(function(){foo.style.left = parseInt(foo.style.left)+1+'px';},20*i);

缺乏适当的缩进:)

Answer 5

您的for循环行以分号结尾，这不是循环。 如果您修复该问题，它应该可以工作。