Jquery的每個環路+ setTimeout的問題增量

http://jsfiddle.net/fxLcy/ - 例如具有的setTimeoutJquery的每個環路+ setTimeout的問題增量

http://jsfiddle.net/fxLcy/1/ - 這是沒有的setTimeout演示。所有元素都在正確的地方，但我真的需要延遲動畫=/

我想通過css轉換和setTimeout每行放置6張卡片。重點是，我不能使用增量爲我的左和頂部參數setTimeout內，因爲這東西只是總結我所有的增量和設置元素到最後的地方。

var self = $(this); 
if (increment % 6 === 0 && increment !== 0) { 
    topIncrement++; 
    leftIncrement = 0; 
}; 
setTimeout(function() { 
    self.css({'left' : 10 + leftIncrement * (resizedWidth + 20), 
    'top' : $("#controlPanel").height() + 10 + topIncrement * (resizedHeight + 20)}); 
}, increment * 500) 
leftIncrement++; 
increment++;

來源

2014-02-10 Nikolay Talanov

您的增量。該值在所有迭代中共享，這意味着所有setTimeout回調將使用增量leftIncrement和topIncrement的相同值。 –

所以這個問題是變量被翻過超時共享，你想的JavaScript結束對每個x和y位置（您希望每個tmeout採取X/Y值的快照 - 的JavaScript關閉）。

所以把你上面的代碼和改變的setTimeout來，我相信沒有的伎倆以下（請參閱updated fiddle）的每個有問題外被定義

var valuex = 10 + leftIncrement * (resizedWidth + 20); 
var valuey = $("#controlPanel").height() + 10 + topIncrement * (resizedHeight + 20) 
setTimeout(function() { 
    self.css({'left' : valuex, 
    'top' : valuey}); 
}, increment * 500)

來源

2014-02-10 19:13:00

哇，這是一種魔法！謝謝，完美的作品。 –

不客氣=]很高興能得到協助...... javascript中的setTimeouts可能會成爲真正的痛苦，有時候哈哈。 –

Jquery的每個環路+ setTimeout的問題增量

回答

相關問題