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

Question

我有一些 Google Maps JS，可以在 map 上绘制许多标记。然而，在加载标记时，我注意到图像没有及时加载，因此没有放置标记。 为了解决这个问题，我修改了返回 map 标记的函数，如下所示:

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;
    }
}