How to execute a javascript/jquery function only after the completion of another function?

Question

I know this is a simple question, but I don't really know how to do it. I'm executing two functions in my code, 'luxboxEngine' and 'fitToScreen', the latter of which requires the completion of the former. How do I tell 'fitToScreen' to only execute after 'luxboxEngine' has completed? Right now I have this, which gets the desired results:

luxboxEngine(self);
setTimeout(fitToScreen, 1000);

...But I know that's not a good solution. I've read about callback functions, but I'm afraid I don't really get what they are / how to incorporate them. Thanks for reading.

EDIT: So as Sudharsan Sri and Brian McGinity answered below, a callback is the solution. Here's the code I used to get what I need in my program:

    luxboxEngine(self, function () {
       fitToScreen(); 
    });

That fires the fitToScreen function after the completion of luxboxEngine.

What is "luxboxEngine" and how does it work? Is it synchronous? Asynchronous? If it's asynchronous and doesn't provide a callback or Promise mechanism (it should, see the documentation), then you're up a creek without a paddle and have to fall back to flailing wildly (e.g. setTimeout or other hack) in the canoe. — user2864740
– user2864740, Commented Feb 11, 2014 at 3:52
luxboxEngine animates a whole bunch of stuff, and self is a variable passed as a parameter containing a picture to be animated. — Ber
– Ber, Commented Feb 11, 2014 at 3:55
@Ber, I just updated my answer... the function being passed as an argument waits to be called... passing it as an argument is like defining a function, it only runs when called. — Brian McGinity
– Brian McGinity, Commented Feb 11, 2014 at 4:16

bjb568 · Accepted Answer · 2014-05-10 08:33:54Z

1

Use a callback:

luxboxEngine(self , function() { fitToScreen(); });

edited May 10, 2014 at 8:33

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

answered Feb 11, 2014 at 3:54

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sudharsan S Over a year ago

Welcome It's my pleasure

Brian McGinity · Accepted Answer · 2014-02-11 04:14:18Z

1

like a callback? Pass the function as a argument then call it:

 fitToScreen( function(){luxBoxEginie();}  );

 function fitToScreen( cb ) {
  //// do somethings
  cb()
 }

or

luxboxEngine(self, function (){ fitToScreen(); });

function luxboxEngine( s, cb)} {
 // do somethings
 cb();  //execute the callback function
}

fitToScreen() is passed as an argument into luxboxEngine(). fitToScreen() waits to to be executed, and runs only when you do: cb()

edited Feb 11, 2014 at 4:14

answered Feb 11, 2014 at 3:52

Brian McGinity

5,9756 gold badges40 silver badges46 bronze badges

1 Comment

Ber Over a year ago

Yep a callback is the solution.

bjb568 · Accepted Answer · 2014-02-11 03:50:24Z

0

luxboxEngine(self); //Executes, returns undefined, nothing happens with return value
fitToScreen(); //The first one is done by the time we get here

answered Feb 11, 2014 at 3:50

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

Collectives™ on Stack Overflow

How to execute a javascript/jquery function only after the completion of another function?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related