임시 범위를 사용하십시오. 비동기 함수 setTimeout을 호출하고 있습니다 ...
코드에서 settimeOut() 함수를 사용하여 이벤트를 예약합니다. 코드가 실행되면 settimeOut() 함수를 호출 한 후 하나의 반복이 대기하지 않습니다. j = 0 ~ j < = numberOfButtons에 대한 모든 setTimeout 이벤트를 일정하게 유지합니다. 타임 아웃 이벤트가 발생할 때 그 다음 JS ...
모든 타임 아웃 이벤트를 스케줄링 및 J의 값이 numberoOfButtons 같다되어 ... 타임 아웃 이벤트가 발생할 때까지 루프 아래 나머지 코드를 실행
유지
이제 javascript에서 사용되는 또 다른 개념이 실행됩니다. 이 개념을 "범위"라고합니다. 함수의 범위는 함수가 액세스 할 수있는 변수로 정의 될 수 있습니다 (매우 정확한 정의는 아님). 자바 스크립트에서 함수의 범위에는 상위 함수의 변수도 포함됩니다 (부모, 조부모의 변수뿐 아니라 ...) ...
코드에서 타임 아웃 이벤트가 발생하면 콜백 함수가 호출됩니다. 콜백이 실행될 때 각 콜백이 참조하는 j 값은 사용자가 생각하는 바가 아닙니다. j의 값은 부모 함수의 numberOfButtons와 같습니다. 따라서 모든 콜백은 예기치 않은 동작으로 이어지는 콜백을 실행할 때 그 값을 참조합니다.
입력 매개 변수가있는 다른 함수를 j로 추가하고 호출했습니다. 이 함수는 루프의 모든 반복에서 호출되어 j를 새로운 값으로 설정합니다. 이제 콜백이 실행될 때 parent 함수는 for 루프가있는 함수가 아닙니다. 부모 함수는 내가 추가 한 익명 함수입니다. 해당 익명 함수의 j 값은 각 함수에 대해 국지적이며 다른 값입니다. 따라서 콜백이 실행될 때 참조 할 j 값을 참조합니다. 그것이 예상되는 행동을하는 이유입니다.
for (j = 0; j<=numberOfButtons; j++){
(function(j){
setTimeout(function() {
$buttons.eq(j).animate({
height: buttonBig,
width: buttonBig
},150, 'linear');
}, 3000 * (j + 1));
})(j);
}
jQuery에는 지연 애니메이션이 포함됩니다. – George