Question

我尝试在另一个功能之后执行功能，但我在Chrome中遇到此错误：

TypeError：无法读取属性＆＃39;已完成＆＃39;未定义的

这些功能看起来像这样，但我认为它并不那么重要，因为它们运行良好：

function loadImages(){                                     
      var img_split = new Image();
      img_split.onload = function(){
      var this_canvas = img_canvas_split;
      this_canvas.width = w;
      this_canvas.height = h;
      this_canvas.getContext('2d').drawImage(this, 0,0, w, h);
      console.log("img 2");
  };
  img_split.src = path;

      var bg = new Image();
      bg.onload = function(){
      var this_canvas = bg_canvas;
      this_canvas.width = panorama_w;
      this_canvas.height = panorama_h;
      this_canvas.getContext('2d').drawImage(this, panoramaX,panoramaY, panorama_w, panorama_h);
      console.log("img 3");
   };
   bg.src = path_panorama;
}

var drawToMain = function(){
    ...
    main_ctx.drawImage( bg_b, 0, 0, bg_b.width * 0.5, bg_b.height * 0.5, panoramaX, panoramaY, bg_canvas.width, bg_canvas.height );
    main_ctx.translate(imageX+img_canvas.width/2, imageY+img_canvas.height/2);
    main_ctx.rotate(angle);
    main_ctx.translate(-(imageX+img_canvas.width/2),-(imageY+img_canvas.height/2));
    main_ctx.drawImage(img_canvas, imageX, imageY);
    main_ctx.setTransform(1,0,0,1,0,0);
};

但是当我这样称呼他们时：

loadImages().done( drawToMain );

如上所述出错。你不知道如何解决这个问题吗？我需要首先加载我的图像然后执行函数。

Answer 1

我认为您可以在函数中使用多回调。 drawToMain函数可以是bg.onload的回调函数;和bg.onload可以是img_split.onload的回调。

function loadImages(){                                     
  var img_split = new Image();
  var bg = new Image();

  img_split.onload = function(){
  var this_canvas = img_canvas_split;
  this_canvas.width = w;
  this_canvas.height = h;
  this_canvas.getContext('2d').drawImage(this, 0,0, w, h);
  console.log("img 2");

   img_split.src = path;

   // First callcack
   bg.onload = function(){
      var this_canvas = bg_canvas;
      this_canvas.width = panorama_w;
      this_canvas.height = panorama_h;
      this_canvas.getContext('2d').drawImage(this, panoramaX,panoramaY, panorama_w, panorama_h);
      console.log("img 3");
      bg.src = path_panorama;
      drawToMain(); // callback when all is done
   };
  };
  }

Answer 2

.done()函数用于xHR（ajax）回调的上下文中。如果没有延迟对象，它将不适用于常规函数。我没有在这个函数上看到任何特定的异步请求。我会建议回调，如上所述，但你也可以使用$.when()'伪造'延迟，即。 $.when(loadImages()).done(drawToMain);虽然这会立即执行，但不确定你会在那里获得什么。

最佳解决方案是将以下内容添加到loadImages()函数中：

function loadImages(callback){
  // rest of code
  // right before close tag: 
  if (!!callback && typeof callback == 'function') {
      callback();
  }
}

然后当你调用函数时： loadImages(drawToMain());

请注意，这会对您加载这些脚本的方式/位置以及如何组织函数做出很多假设。如果您需要在第一个函数中访问变量，可以将callback()更改为callback(this)或callback(bg)

Answer 3

最简单的方法是传入一个回调函数：

function abc(callback) {
    //do some stuff...

    callback();
}

abc(function() { console.log('foo'); });

在上一个完成后执行函数

3 个答案: