我可以在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事件嗎？

回答

相關問題