JavaScript img onLoad и замыкания - почему этот код запускает бесконечный цикл? - PullRequest
Новая
       12

JavaScript img onLoad и замыкания - почему этот код запускает бесконечный цикл?

2 голосов
/ 12 августа 2010

У меня есть 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.(Я так думаю!)

Ответы [ 3 ]

3 голосов
/ 12 августа 2010

Вы должны иметь в виду, что JavaScript является по сути однопоточным, и этот единственный поток фактически используется для выполнения JavaScript и рендеринга в браузере. Следовательно, ваш while цикл заблокирует поток и будет работать бесконечно. 

while(imgloaded == false) {
    // onload will never get called:
    img.onload = function() {
        imgloaded = true;
    }
}
1 голос
/ 12 августа 2010

Все, что вы делаете в цикле while - это настраивает обработчик загрузки изображения для функции. Функция никогда не вызывается.

Вы должны просто установить обработчик загрузки один раз, и обработчик должен выполнить все, что требуется с изображением (добавить значок).

Примерно так: 

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));
    }
}
0 голосов
/ 12 августа 2010

imgloaded в вашем коде является локальной переменной (в области действия функции newGoogleMapPin). Таким образом, переменная imgloaded, установленная в обратном вызове onload, является другой переменной . В этом случае первая переменная всегда ложна, что вызывает бесконечный цикл.

Чтобы решить проблему, объявите ее как global переменная вне функционального блока.

...