javascript - Jquery each loop + setTimeout 增量问题

Question

http://jsfiddle.net/fxLcy/ - setTimeout 示例

http://jsfiddle.net/fxLcy/1/ - 这是没有设置超时的演示。所有元素都在正确的位置，但我真的需要延迟动画 =/

我想通过 css transition 和 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++;

Answer 1

所以问题是变量在超时之间共享，您希望 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)