负载监听器上的函数触发太早

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;