0


这是我从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 引擎就会将这些事件推送到队列中。所以我只是不明白为什么这不起作用。

4

5 回答 5

0

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));
}
于 2012-06-07T06:39:15.313 回答
0
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;

于 2012-06-07T06:42:48.100 回答
0

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 :)

于 2012-06-07T06:43:56.290 回答
0

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

于 2012-06-07T07:07:01.953 回答
0
function doMove() {
  foo.style.left = parseInt(foo.style.left)+1+'px';
  setTimeout(doMove,20); 
}

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

于 2012-06-07T06:41:51.167 回答