在上一个函数完成后执行函数

Question

我正在尝试在另一个函数之后执行函数，但我在 chrome 中收到此错误：

TypeError: Cannot read property 'done' of undefined

函数看起来像这样，但我想它不是那么重要，因为它们工作正常：

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

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

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

    callback();
}

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

Answer 2

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

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

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

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

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

Answer 3

我认为您可以在函数中使用多回调。 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
   };
  };
  }

在上一个函数完成后执行函数

execute function after the previous one is done

html

javascript

jquery

canvas

onload