Make JS Wait for Function to Finish

Discussion in 'Scripts' started by ronaldroe, Jul 3, 2014.

to remove all ads.
  1. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Ok, I can't give much in the way of details here, but here's the gist:

    I have 2 JS functions that will be used to create new functions (there are more, but they aren't relevant ATM). So, it's like so:

    Code:
    function one(){
    // Do some stuff
    }
    
    function two(){
    // Do some other stuff
    }
    
    And then someone, ATM me, but in the future, the user will need to use those functions in succession to create new functions, like so:

    Code:
    function three(){
      one();
      two();
      one();
    }
    The problem I'm having is that when I create function "three", the other functions aren't waiting for the previous to finish before they fire to execute. It's vitally important that they do so, and even more vitally important that whatever causes them to wait be part of function "one" and "two", not function "three".

    Hope that makes sense. Anyone have any ideas?

    Initially, it worked fine, but I had to add a duration to them so the change could be seen, and that's when it all went funky on me. I thought about adding a wait time equivalent to the duration, but that won't do. The duration is 200ms times a number that "one" and "two" take as an argument. Example one(3); would be a total of 600ms duration, or 200ms * 3.
     
  2. Little Ego

    Little Ego New Member

    Messages:
    10
    Hi, what kind of work is being done inside of the component functions? Are there timers / asynchronous activities kicking off?

    You're best relying on callbacks and queues rather than timers.
     
  3. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,657
    Javascript doesn't 'do' this kind of thing too well, it lacks a "gosub()" operation and it just 'eats' resources making it emulate subroutines.

    It will have to be in a "while" loop with a switch statement to trigger the functions depending on the flags that the previous function sets, and the last function sets the 'loop exit' flag on completion
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Ego, sorry, can't tell you what the functions do, but it does work with canvas, and the problem comes in when I try to animate movement over a specific period of time.

    Chris, I seem to be getting that same input all around. How do I do that while making it transparent to the user? I'm starting to think it might be easier just to take the user's functions as input and process it server side to add other functions and methods to do some of these tasks.
     
  5. Little Ego

    Little Ego New Member

    Messages:
    10
    No probs, chrishirst is right. Just an idea: if your functions are sequential and involve canvas operations could you just use your functions to queue a set of states and do all of your actual work in a single requestAnimationFrame call?
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,657
    For something that does what you are describing, the better option would be a Java 'applet' which can take user input and process it as a 'servlet' if required, then seamlessly and transparently pull the output, trying to achieve that with javascript would result in the browser "hanging" as the local resources become depleted.
     
  7. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I'm still kinda learning canvas, and I'm using a helper library at that, so I don't know if that'd work. One thing I do know at this point, one way or the other, I'm going to have to do what Chris is saying below.

    I have had something similar in mind from the get-go, because I knew as it got more complex I'd have to. I'm still in the very early dev stages here, so I may just work up a delay mechanism in the functions for now so I can keep going and I'll just end up adding that when I build the server-end code.
     
  8. Little Ego

    Little Ego New Member

    Messages:
    10
    I'm not sure the applet route is the best method tbh without more info. You can achieve serious canvas performance with javascript inputs without hanging the "animation update thread" so to speak with object pooling and queues. Good luck! =)
     
  9. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Thanks. I'll look into it. I wasn't going to go with a Java applet, but similar in spirit. I'll eventually be parsing user input on the server-side, but I want to make sure I'm not loading the server down with things I could do on the client side either.
     
  10. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Just as an update to this, I did find a library that's designed to help with exactly this. It's TweenJS, and it's part of the EaselJS group of libraries.
    I eventually coupled that with GreenSock's TimelineLite. Still can't give much in the way of details, but this basically will build an animation timeline on a canvas, which I can then execute later.
     

Share This Page