jQuery : 외부 변수에 액세스하는 방법?

Question

나는 이런 식으로 해결해야 할 상황에 처해있다. local variable을 global variable으로 변환해야합니다. this answer.에서이 메서드를 찾은 이미지의 실제 너비와 높이를 반환하는 예제가 있습니다.

국부 변수 pic_real_height 및 pic_real_width을 전역 변수로 변환해야합니다. 실제 값을 반환해야합니다.

Here is jsFiddle.

CSS :

img { width:0px; height:0px; }​ 

jQuery를 :

console.log($('.imgCon img').height());//returns 0 

var img = $('.imgCon img')[0]; // Get my img elem 
var pic_real_width, pic_real_height; 
$('<img/>').attr('src', $(img).attr('src')).load(function() { 
     pic_real_width = this.width; 
     pic_real_height = this.height; 

     console.log(pic_real_width + 'x' + pic_real_height); 
     // -- returns true 570x320 -- 
}); 
//problem starts here: 
console.log(pic_real_width + 'x' + pic_real_height); 
//returns undefined 
// need to return this as an global variable 570x320 

Answer 1

이 줄,

console.log(pic_real_width + 'x' + pic_real_height);

,이 라인

pic_real_width = this.width; 
    pic_real_height = this.height; 

    console.log(pic_real_width + 'x' + pic_real_height); 
    // -- returns true 570x320 -- 

실행 대기의 비동기 때문에하지 않습니다. 콜백 함수가 호출되기 전에

따라서 console.log(pic_real_width + 'x' + pic_real_height);를 실행한다 (즉, 사용자는 width 및 height을 설정하기 전에).

이미 정의 했으므로 undefined으로 표시됩니다.

일반의 솔루션이 될 것이다,

$('<img/>').attr('src', $(img).attr('src')).load(function() { 
     pic_real_width = this.width; 
     pic_real_height = this.height; 

     console.log(pic_real_width + 'x' + pic_real_height); 
     // -- returns true 570x320 -- 
     restOfMyProcessing(); 

}); 

function restOfMyProcessing() { 
    console.log(pic_real_width + 'x' + pic_real_height); 
} 

Answer 2

당신은 이미지로드 이벤트에 설정하기 전에 pic_real_width 및 pic_real_height를 사용하려고합니다.
코드에서와 마찬가지로 먼저 alert(pic_real_width + 'x' + pic_real_height)은 이미지로드 함수 중 하나이며 undefined을 반환하고로드 이벤트의 두 번째 alert은 예상 한 값을 반환합니다.
가로드 기능/이벤트 후 소스 속성의 설정을 이동하는 것이 좋습니다 있지만 :

$('<img/>') 
.load(function() { 
    pic_real_width = this.width; 
    pic_real_height = this.height; 

    alert(pic_real_width + 'x' + pic_real_height); 
    // -- returns true 570x320 -- 
    //now continue process here or call another function... 
}) 
.attr('src', $(img).attr('src'));