Make JS Wait for Function to Finish

ronaldroe

Super Moderator
Staff member
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.
 

Little Ego

New Member
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.
 

chrishirst

Well-Known Member
Staff member
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
 

ronaldroe

Super Moderator
Staff member
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.
 

Little Ego

New Member
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?
 

chrishirst

Well-Known Member
Staff member
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.
 

ronaldroe

Super Moderator
Staff member
...could you just use your functions to queue a set of states and do all of your actual work in a single requestAnimationFrame call?
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.

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.
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.
 

Little Ego

New Member
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! =)
 

ronaldroe

Super Moderator
Staff member
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.
 

ronaldroe

Super Moderator
Staff member
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.
 
Top