Run js function after previous js function ends complete

Question

I have this js function

$('#galleria').galleria({
  show:<?php echo $show;?>,
  autoplay: 3000,
  extend: function(options) {
    var gallery = this; // "this" is the gallery instance

    this.bind('image', function(e) {
      var curr = gallery.getData(gallery.getIndex());
      var currOrig = curr.original;
      var altTxt = $(currOrig).attr('alt');
      $(e.imageTarget).attr('alt',altTxt);
    });
    this.bind('thumbnail', function(e) {
      var thumb = gallery.getData(e.index);
      var thumbOrig = thumb.original;
      var altText = $(thumbOrig).attr('alt');
      $(e.thumbTarget).attr('alt',altText);
    });
  }
})

Basicaly this is free image galery. The code above must be included right after the html with images according to the owner instructions: http://galleria.io/

The problem is that this function recreates new elements from the html and it does it for different time each time the page is loading. The time needed for the js script vary because each page that use this gallery js has different number of images so different time for execution. I need to run another function:

load_img_comments('<?php echo $image;?>','<?php echo $imagename;?>','','i');

which takes a element from the ready html and does something with it. If I set this function to run on document ready or onload the function can not find the element because the first function is still working on the html. I tried to delay the execution for secong js function but as I explained above each page has different number of images and I can not predict how many time the first function will need to ends.

How can I circle this stupid situation?

Please advise. P.S.

I also tried this:

$(document).bind($('#galleria').galleria({
  show:<?php echo $show;?>,
  autoplay: 3000,
  extend: function(options) {
    var gallery = this; // "this" is the gallery instance

    this.bind('image', function(e) {
      var curr = gallery.getData(gallery.getIndex());
      var currOrig = curr.original;
      var altTxt = $(currOrig).attr('alt');
      $(e.imageTarget).attr('alt',altTxt);
    });
    this.bind('thumbnail', function(e) {
      var thumb = gallery.getData(e.index);
      var thumbOrig = thumb.original;
      var altText = $(thumbOrig).attr('alt');
      $(e.thumbTarget).attr('alt',altText);
    });
  }
}), load_img_comments('<?php echo $image;?>','<?php echo $imagename;?>','','i'));

but it returns error: TypeError: r.push is not a function in main jquery.js file

Thank you in advance !

score 0 · Answer 1 · edited May 23 '17 at 11:44

This is how you run js function after previous js function ends:

var tempFunc =  FunctionToAppendTo; //note: no () at the end
FunctionToAppendTo = new Function(param1, param2){
  tempFunc.apply(this, arguments);

  //your new code goes here...

};

Note: you might need to use the correct "this" for the call to apply.

Source: apply, getting arguments

edit: it seems you want to attach to the Image-Event of galleria. This should do the trick:

$('#galleria').galleria({
show:<?php echo $show;?>,
autoplay: 3000,
extend: function(options) {
  var gallery = this; // "this" is the gallery instance

  this.bind('image', function(e) {
    var curr = gallery.getData(gallery.getIndex());
    var currOrig = curr.original;
    var altTxt = $(currOrig).attr('alt');
    $(e.imageTarget).attr('alt',altTxt);

    load_img_comments('<?php echo $image;?>','<?php echo $imagename;?>','','i'));
  });
  this.bind('thumbnail', function(e) {
    var thumb = gallery.getData(e.index);
    var thumbOrig = thumb.original;
    var altText = $(thumbOrig).attr('alt');
    $(e.thumbTarget).attr('alt',altText);
  });
}

})

Or you could attach your function from outside the, as explained here

wotanii, thanks, but honestly from your example it is not clear for me how to change it.. Can you please provide example with both functions above? thanks — thecore7, Dec 15 '15 at 07:54

Run js function after previous js function ends complete

1 Answers1