2015-01-23 2 views
0

요소의 높이에 따라 애니메이션 트리거를 설정하려고합니다. 이 프로젝트는 AngularJS로 제작되었지만, 내가 가지고있는 문제는 정말로 어지럽게 보입니다. 이미지가로드 될 때 imgH 변수를 설정하려고합니다. 내 onload 함수에서 로그는 올바른 이미지 높이를 반환하고 전역 변수 imgH를 설정합니다. 내 온로드 기능 후 변수 입니다함수 내 전역 범위 변수 설정하기

var imgH; 
     $('.step-image').on('load',function(){ 
      imgH = $(this).height(); 
      console.log(imgH); 
     }); 
console.log(imgH); 
+4

비동기의 세계에 오신 것을 환영합니다! 'load' 이벤트는 코드 끝의'console.log' 다음에 * 발생합니다. 그래서 그 시점에서'imgH' 값은 설정되지 않습니다. –

+2

"피자를 먹고 피자를 먹기 전에 피자를 먹으려 고합니다." –

+0

@TrueBlueAussie D –

답변

2

정의되지 않은 콘솔 로그 명령이 리턴는 imgH = 당신이 마지막에 console.log 그렇게 할 때 그냥 아직 설정의 설정하기.

  1. var imgH;을 - undefined의 초기 값으로 세계를 만듭니다

    여기에 코드가 실행되는 순서입니다.

  2. $('.step-image').on('load', function ...) - 처리기를 설정하지만 아직 함수를 호출하지 않습니다.
  3. console.log(imgH); (하단) - 아무 것도 값을 imgH에 할당하지 않았으므로 undefined을 표시합니다.
  4. 나중에, 이미지가로드 될 때 처리기 함수가 호출되고 imgH을 설정합니다.
  5. console.log(imgH); (처리기 기능 내부) - 값을 표시합니다.