ロードリスナーの関数が早すぎます

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

以下の作品が、私は、SVGを位置決めするための[i]のインデックスを使用することはできません。

// 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;