javascript - 我可以在 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

Wrap it in a closure to preserve the value of i "at that time"

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() { for (var i=0; i<1000; i++)
setTimeout(function(){foo.style.left = parseInt(foo.style.left)+1+'px';},20*i); } 

after for loop, there is Unnecessary semicolon;

Answer 3

You had a semi-colon after the for loop. Hence the loop runs for 1000 times and the setTimeout for one time.

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

Lack of proper indentation :)

Answer 4

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

Answer 5

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

回调函数只会被执行一次setTimeout，上面的代码是有效的，因为回调函数是它自己的函数，所以它被称为递归。