2014-11-09 5 views
2

일부 요소에 애니메이션을 적용 할 for 루프를 일시 중지하려면 Timeout을 사용하려고합니다. 하나씩 다른 버튼을 하나씩 확장하고 싶습니다.jQuery - 중첩 된 setTimeout을 사용하여 for 루프를 잠급니다.

현재 두 가지 문제가 있습니다. 첫 번째는 eq. (j)가 꼭 필요한 것보다 더 큰 요소 색인 1을 갖는 것으로 보인다는 것입니다. 다른 하나는 마지막 애니메이션으로 건너 뜁니다.

for (j = 0; j<=numberOfButtons; j++){ 
    setTimeout(function() { 
     $buttons.eq(j).animate({ 
      height: buttonBig, 
      width: buttonBig 
     },150, 'linear'); 
    }, 3000 * (j + 1)); 
} 

이것은 처음 stackoverflow를 사용하므로이 질문을 올바르게 게시하고 있는지 알려주세요.

미리 도움을 주셔서 감사합니다.

+0

jQuery에는 지연 애니메이션이 포함됩니다. – George

답변

5

임시 범위를 사용하십시오. 비동기 함수 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); 
} 
+0

고마워, 그 작품. 비동기 함수가 원래 예제에서 j에 액세스 할 수없는 범위를 갖는 이유에 대해 자세히 설명 할 수 있습니까? – lemonWedge

+0

이것을 이해하려면 자바 스크립트에서 "scope"와 "closure"와 같은 개념을 이해해야합니다. 또한 단일 스레드 자바 스크립트가 어떻게 작동하는지 배우셔야합니다. 단어로 설명하여 이해할 수 있다고 생각하지 않습니다. 당신은 구글을 ​​읽고 기사를 읽고, 코딩을하고, 연습을 해보십시오 ...이 참고 자료들은 저를 이해하는데 도움이되었습니다 .. http://ejohn.org/apps/learn/, http://stackoverflow.com/questions/500431/what-is-the-variables-of-variables-in-javascript, http://stackoverflow.com/questions/111102/how-do-javascript-closures-work –

관련 문제