CODEWITHSUNDEEP
javascriptjqueryhtmlcanvasonload
Petr Bečka
Petr Bečka

Reputation: 794

execute function after the previous one is done

I'm trying to execute function after anotherfunction but I'm getting this error in chrome:

TypeError: Cannot read property 'done' of undefined

The functions look like this but I guess it's not so important because they works fine:

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

But when I call them like this:

loadImages().done( drawToMain );

It makes error as above. Don't you have any idea how to solve this issue? I need to load my images first a then execute function.

Upvotes: 1

Views: 76

Answers (3)

Ray Lloy
Ray Lloy

Reputation: 171

I think you can use multi callback in your function. drawToMain function can be the call back of bg.onload; and bg.onload can be the callback of 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
   };
  };
  }

Upvotes: 2

twill
twill

Reputation: 775

The .done() function is used in context of xHR (ajax) callbacks. it will not work on a regular function without a deferred object. I don't see any specific asynchronous requests on this function. I would suggest a callback, as mentioned above, but you could also 'fake' a deferred using $.when(), ie. $.when(loadImages()).done(drawToMain); although this will execute immediately, so not sure what you would gain there.

The best solution would be to add the following to your loadImages() function:

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

and then when you call the function: loadImages(drawToMain());

Note, this makes a lot of assumptions about how/where youre loading these scripts and how functions are organized. If you need to access variables in the first function, you could change callback() to callback(this) or callback(bg)

Upvotes: 1

arthurakay
arthurakay

Reputation: 5651

The easiest approach would be to pass in a callback function:

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

    callback();
}

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

Upvotes: 0

Related Questions