Need function to wait until animation is completed before returning

I would like to call a function. But I would like the animation within that fn to be completed before the js engine goes back to line 3 and continues down the code. I don't want to put the code from line 3 into the callback of the fadeOut() fn because I would like the animate_out_current_photo() fn to be an independent module that doesn't care about the code that is calling it. I just want this fn to start its animation, wait for that animation to complete, and then return to the main code. I this possible?

Thanks for any help on this matter.......Mike


1.)function animate_out_current_photo(){
main_image$.fadeOut( 2000 );
}//hide_current_photo


2.)animate_out_current_photo();
3.)<next line of code>
4.)<more code>
5.)etc.

 

After you set the fadeout, set a timeout for say... 30ms longer. It should fire shortly after the animation.

NOT that fading an element in/out has any business in the scripting apart from a class swap -- but that's just part of why jQuery is pointless bloated garbage that has no business on websites in the first place!

 

I can sense that you are something of a purist, and would never lower yourself to using a javascript library. Nevertheless, thank you for your response and your completely unsolicited opinion on the merits of JQuery.

 

Oh, since the .fadexxx functions in jQ have a handler -- you could also make that handler toggle a global boolean, then loop until that boolean changes between your lines 2 and 3. Kinda sloppy though.

Really I think you should just suck it up and put that code in a handler instead of inline... Linear execution is overrated once you have events going on. You could pass... Yeah...

Pass the handler that would be passed to .fadeIn to your custom function.

function animate_out_current_photo(handler){
	main_image$.fadeOut(2000,handler);
}

Code (markup):

that way animate_out_current_photo can be passed what to do, without it worrying about what it's being passed.

 

I appreciate your help, but I don't quite see how passing a callback fn to fadeOut() is going to help me. The handler fn that you are passing in will be called 2 seconds after the js engine has already come back to line 3. How would the handler fn cause me to stay inside animate_out_current_photo() until the animation is complete.

Let me pose the question to you this way. If you wanted to call function 'A' from your top-level code, but needed function 'A' to complete an operation before you could continue with the top-level code, how would you do it?

Thanks for your help.

 

Fadeout has a complete function. Keep it empty or do stuff within

//hide_current_photo
function animate_out_current_photo(){
    main_image$.fadeOut(2000, function() {
        // Callback, display a success message or keep empty, its still waiting
    });
}

Code (markup):

 

Which is why you would put EVERYTHING you want done upon completion inside the handler. You are dealing with event driven code, which means you need to STOP thinking linear execution.

Much less I'm not even sure being a scripted event it will actually even fire if you hang execution -- the fadein might not even render if you actually waited for it to 'finish' as it might never actually do so. Little detail a lot of people miss -- timeout type events (and rendering updates) do NOT execute until linear execution finishes.

Part of why you don't need double buffering on canvas -- rendering updates aren't done until script execution ends.

 

thanks