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

这里有一段代码，我从
http://www.schillmania.com/content/projects/javascript-animation-1/demo/
很简单的JS动画复制：我可以在for循环中设置多个window.setTimeout事件吗？

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

来源

2012-06-07 NSF

要回答问题的标题，您可以设置多个定时器。你应该将代码设置为'setTimeout（“foo.style.left = parseInt（foo.style.left）+ 1 +'px';”，20 * i）;'。 – Mizuho

@mizuho很久以前，我们停止将字符串传入setTimeout，这与问题无关 –

@NSF在代码中使用HTMLElement.style时，它不是跨浏览器兼容的。在你展示的例子中，他们被迫在脚本中初始化foo.style.left =“1px”，即使他们已经在CSS中设置它。您应该使用库来检索CSS样式，或者实现正确的跨浏览器行为。 http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ –

您在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);

缺乏适当的缩进的:)

来源

2012-06-07 06:43:56

啊......你说得对。一个愚蠢的错误... – NSF

它包装在一个封闭保存的i值“当时”

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-07 06:39:15 Joseph

'i'永远不会被使用从关闭 –

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

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

来源

2012-06-07 06:41:51 xdazz

不正确，循环调用setTimeout 1000次，每次增加延迟 –

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

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

来源

2012-06-07 06:42:48 Laughing

您的环线用分号结束，这不是循环。它应该工作，如果你解决这个问题。

来源

2012-06-07 07:07:01

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

回答

相关问题