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;

加载侦听器上的函数触发得太早

1 个答案: