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

您在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));
    }
}

Answer 3

代码中的

imgloaded是一个局部变量（在newGoogleMapPin函数的范围内）。因此，onload回调中设置的imgloaded变量是另一个变量。在这种情况下，第一个变量始终为false，这会导致无限循环。

要解决此问题，请将其声明为功能块外的全局变量。

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

3 个答案: