JavaScript img onLoad和closures - 为什么这段代码会触发一个无限循环？

Question

我有一些Google Maps 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功能的范围）。因此，onload回调中设置的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)); 
    } 
}