javascript - ループ内のjqueryアニメーションは同じインデックスを返します

Question

ここで、ループ内のアニメーションに問題があります。出力は、私が推測する必要があるようですが、私が望むものではありません。

for (var i = 0; i < slots.length; i++) {
  $('#slot-'+i).animate({
    marginTop: -10
  }, 200, function() {
    console.debug(i);
    if (i == 0) somefunction();
  });
}

問題は、console.debug(i) が毎回 for ループの最後のインデックスを出力することです。

私が達成したいのは、アニメーションの完全な機能で、関数を呼び出したいのですが、一度だけです。

Answer 1

for (var i = 0; i < slots.length; i++) {
    $('#slot-' + i).animate({
        marginTop: -10
    }, 200, (function(count) {
        return function() {
            console.debug(count);
            if (count == 0) somefunction();
        };
    })(i));
}

ここでの問題は、反復ごとに適切な成功ハンドラーを返す、すぐに呼び出される関数式を使用しない限り、すべてのハンドラーが i の同じ値を参照することです。

Answer 2

これを試して：

var i = 0;
for (i=0; i < slots.length; i++) {
$('#slot-'+i).animate({
    marginTop: -10
  }, 200, function() {
    console.debug(i);
    if (i == 0) somefunction();
  });
}