루프 내의 jquery 애니메이션이 동일한 인덱스를 반환합니다.

Question

루프 내부에 애니메이션과 관련된 문제가 있습니다. 출력은 내가 추측해야하지만 Kow 내가 원하지 않는 것입니다.

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)); 
} 

문제는 당신이 즉시 호출 함수 표현식을 사용하지 않는 반환 각 반복에 대한 적절한 성공 처리기, 당신의 핸들러의 모든 내가 같은 값을 참조 것이라는 점이다.

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(); 
    }); 
}