JavaScript img onLoad 및 Closure -이 코드가 무한 루프를 트리거하는 이유는 무엇입니까?

Question

지도에 여러 마커를 그려 넣은 Google지도 JS가 있습니다. 그러나 마커를로드 할 때 이미지가 시간 내에로드되지 않아 마커가 배치되지 않은 것으로 나타났습니다.

function newGoogleMapPin(type){ 
    var imgpath = "img/gmapicons/"+type+".png"; 
    var img = new Image(); 
     img.src = imgpath; 
    var imgloaded = false; 

    while(imgloaded == false) { 
     img.onload = function() { 
      imgloaded = true; 
     } 
    } 

    return new google.maps.MarkerImage(imgpath, new google.maps.Size(img.width, img.height)); 
} 

문제의 존재가 imgloaded이 나는 클로저를 오해하고 있는가, true로 설정되지 않습니다되어 이 해결하기 위해 나는 다음과 같이지도 아이콘을 돌려 내 함수를 수정? (그렇게 생각합니다!)

Answer 1

JavaScript는 근본적으로 단일 스레드이며,이 단일 스레드는 실제로 JavaScript 실행과 브라우저 렌더링간에 공유된다는 점에 유의해야합니다. 따라서 귀하의 while 루프는 스레드를 차단하고 영원히 반복됩니다. 코드에서

while(imgloaded == false) { 
    // onload will never get called: 
    img.onload = function() { 
     imgloaded = true; 
    } 
} 

Answer 2

imgloaded 은 (newGoogleMapPin 함수의 범위에서) 로컬 변수이다. 따라서 imgloaded 변수는 또 다른 변수입니다. 첫 번째 변수는이 경우 항상 false이며 무한 루프가 발생합니다.

이 문제를 해결하려면 기능 블록 외부에서 글로벌 변수로 선언하십시오.

Answer 3

while 루프에서 수행하는 작업은 이미지의 onload 핸들러를 함수로 설정하는 것입니다. 이 함수는 실제로 호출되지 않습니다.

onload 핸들러를 한 번만 설정하고 핸들러가 이미지에 필요한 모든 작업을 수행하도록해야합니다 (핀 추가). 이 같은

뭔가 :

function newGoogleMapPin(type){ 
    var imgpath = "img/gmapicons/"+type+".png"; 
    var img = new Image(); 
    img.src = imgpath; 
    img.onload = function() { 
       new google.maps.MarkerImage(imgpath, new google.maps.Size(img.width, img.height)); 
    } 
}