Question

Here’s a piece of code I copied from
http://www.schillmania.com/content/projects/javascript-animation-1/demo/
Very simple JS animation:

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

This works fine. However if I change it like this:

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

Consequently there’s no animation at all.
As far as I know JS engine pushes those events into the queue whenever setTimeout is called. So I just don’t understand why this doesn’t work.

Answer 1

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 🙂