負載監聽器上的函數觸發太早

Question

即時消息發送XHR請求，並希望繪製圖像與返回的數據畫布，我也想傳遞一個索引參數，以便我可以在特定位置繪製圖像。

我的問題是我的功能太快，當傳遞參數向下，所以responseText未定義。

// Outside loop 
function drawSVG(i) { 
    svg = this.responseText; 
    svgImage = new Image(); 
    svgImage.src = "data:image/svg+xml," + svg; 
    svgImage.load = artboardContext.drawImage(svgImage, i * sliceWidth, i * sliceHeight); 
} 

// Inside loop 
(function(x) { 
    var colourReq = new XMLHttpRequest(); 
    var count = x; 
    colourReq.addEventListener("load", function() { 
    drawSVG(count); 
    }, false); 
    colourReq.open("GET", "/color/" + hex); 
    colourReq.send(); 
})(x); 

下面的作品，但我不能使用索引[I]用於定位SVG：

// Inside loop 
    (function(x) { 
     var colourReq = new XMLHttpRequest(); 
     var count = x; 
     colourReq.addEventListener("load", drawSVG, false); 
     colourReq.open("GET", "/color/" + hex); 
     colourReq.send(); 
    })(x); 

我不知道這個問題的最好辦法。

Answer 1

responseText未定義，因爲您在錯誤的地方尋找它。

的this的值取決於函數是怎麼被調用：

drawSVG(count);不叫它任何特定的對象，所以你正在訪問window.responseText，而不是colourReq.responseText。

您可以通過colourReq爲另一種說法：

drawSVG(count, this); 

和

function drawSVG(i, xhr) { 
    svg = xhr.responseText;