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