자바 스크립트에서 함수 내에서 변수를 가져 오는 방법

Question

아래의 코드를 사용하여 이미지 너비를 얻으려고하고 있지만 문제가 있습니다. 함수 안에있는 변수를 검색 할 수 없습니다.

var get_image_h_w = new Image(); 
var width; 
         get_image_h_w.onload = function() { 
          width = get_image_h_w.width; 
         } 
         get_image_h_w.src = img_link_url; 

alert(width); 

Answer 1

.onload 핸들러는 alert(width) 실행 한 후, 나중에 시간이 실행됩니다. 실행될 때 변수 width이 설정되지만 그 발생시기를 알 수있는 유일한 신뢰할 수있는 방법은 해당 width 값을 onload 처리기에 사용하거나 onload 처리기에서 호출하려는 코드를 넣는 것입니다. 이것은 비동기 콜백의 예입니다. 즉, 이벤트가 발생할 때 나머지 코드와 "동기화되지 않음"을 의미합니다.

var get_image_h_w = new Image(); 
get_image_h_w.onload = function() { 
    alert(this.width); 
    // you can call some code here that wants to use this width 
    // and pass the width to that function 
    callYourFunction(this.width); 
} 
get_image_h_w.src = img_link_url; 

참고 : 나는 또한 this가 onload 이벤트를 만든 목적입니다 this.width를 사용하도록 전환. 그것은 당신이 가진 것과는 다른 무언가를하지는 않지만, 일반적으로 사용할 수 있습니다. 특히 동일한 이벤트 핸들러가 여러 객체에서 작동하기를 원할 때 사용하는 것이 좋습니다.

Answer 2

변수 width은 onload 이벤트가 실행될 때까지 실행을 중지하지 않으므로 alert를 호출 할 때 이미지 너비를 유지하지 않을 가능성이 높습니다. onload 이벤트에 단순히 함수를 할당하는 것입니다. onload 이벤트는 즉시 실행되지 않습니다. 이미지가 로딩을 완료하면 실행되고, 실행이 경고 호출에 도달 한 후에 잘 수행 될 수 있습니다.

새로 설정된 변수를 사용하는 onload 이벤트에 콜백 함수를 넣으십시오.

get_image_h_w.onload = function() { 
    width = get_image_h_w.width; 
    finishedLoading(); 
} 

var finishedLoading = function() { 
    var w = width; // width will be set here 
}