1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need function to wait until animation is completed before returning

Discussion in 'JavaScript' started by mikeh0001, Sep 23, 2013.

  1. #1
    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.
    mikeh0001, Sep 23, 2013 IP
  2. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #2
    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!
    deathshadow, Sep 23, 2013 IP
  3. mikeh0001

    mikeh0001 Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #3
    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.
    mikeh0001, Sep 23, 2013 IP
  4. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #4
    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.

    Code (Text):
    1. function animate_out_current_photo(handler){
    2.     main_image$.fadeOut(2000,handler);
    3. }
    that way animate_out_current_photo can be passed what to do, without it worrying about what it's being passed.
    deathshadow, Sep 23, 2013 IP
  5. mikeh0001

    mikeh0001 Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #5
    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.
    mikeh0001, Sep 23, 2013 IP
  6. Basti

    Basti Active Member

    Messages:
    627
    Likes Received:
    6
    Best Answers:
    3
    Trophy Points:
    90
    #6
    Fadeout has a complete function. Keep it empty or do stuff within
    Code (Text):
    1.  
    2. //hide_current_photo
    3. function animate_out_current_photo(){
    4.     main_image$.fadeOut(2000, function() {
    5.         // Callback, display a success message or keep empty, its still waiting
    6.     });
    7. }
    8.  
    Basti, Sep 24, 2013 IP
  7. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #7
    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.
    deathshadow, Sep 24, 2013 IP
    ryan_uk likes this.
  8. mikeh0001

    mikeh0001 Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #8
    thanks
    mikeh0001, Sep 24, 2013 IP