Take the 2-minute tour ×

If I need call this functions one after other,


I know in jQuery I could do something like:


But, let's assume that I'm not using jQuery and I want to call:


How I should call this functions in order to execute some_3secs_function, and AFTER that call ends, then execute some_5secs_function and AFTER that call ends, then call some_8secs_function?


This still not working:


Three animations start at same time

Where is my mistake.

share|improve this question
do you mean for the functions to be called in exactly 3 5 & 8 seconds or just one after another? –  Trass Vasston Mar 3 '11 at 23:48
I think you're simply unsure about synchronous vs. asynchronous function execution. I've updated my answer below. Hope it helps. –  lwburk Mar 4 '11 at 16:22

5 Answers 5

up vote 49 down vote accepted

In Javascript, there are synchronous and asynchronous functions.

Synchronous Functions

Most functions in Javascript are synchronous. If you were to call several synchronous functions in a row


they will execute in order. doSomethingElse will not start until doSomething has completed. doSomethingUsefulThisTime, in turn, will not start until doSomethingElse has completed.

Asynchronous Functions

Asynchronous function, however, will not wait for each other. Let us look at the same code sample we had above, this time assuming that the functions are asynchronous


The functions will be initialized in order, but they will all execute roughly at the same time. You can't consistently predict which one will finish first: the one that happens to take the shortest amount of time to execute will finish first.

But sometimes, you want functions that are asynchronous to execute in order, and sometimes you want functions that are synchronous to execute asynchronously. Fortunately, this is possible with callbacks and timeouts, respectively.


Let's assume that we have three asynchronous functions that we want to execute in order, some_3secs_function, some_5secs_function, and some_8secs_function.

Since functions can be passed as arguments in Javascript, you can pass a function as a callback to execute after the function has completed.

If we create the functions like this

function some_3secs_function(value, callback){
  //do stuff

then you can call then in order, like this:

some_3secs_function(some_value, function() {
  some_5secs_function(other_value, function() {
    some_8secs_function(third_value, function() {
      //All three functions have completed, in order.


In Javascript, you can tell a function to execute after a certain timeout (in milliseconds). This can, in effect, make synchronous functions behave asynchronously.

If we have three synchronous functions, we can execute them asynchronously using the setTimeout function.

setTimeout(doSomething, 10);
setTimeout(doSomethingElse, 10);
setTimeout(doSomethingUsefulThisTime, 10);

This is, however, a bit ugly and violates the DRY principle[wikipedia]. We could clean this up a bit by creating a function that accepts an array of functions and a timeout.

function executeAsynchronously(functions, timeout) {
    setTimeout(functions[i], timeout);

This can be called like so:

    [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);

In summary, if you have asynchronous functions that you want to execute syncronously, use callbacks, and if you have synchronous functions that you want to execute asynchronously, use timeouts.

share|improve this answer
This will not delay the functions for 3,5 and 8 seconds, as suggested by the example, they will just run one after another. –  Trass Vasston Mar 3 '11 at 23:47
@Peter - Wait, so I'm confused. If these are simple synchronous calls that happen to take a few seconds to complete, then why do we need any of this? –  lwburk Mar 4 '11 at 0:41
@lwburk Good question. Now that I think about it, I have no idea. –  Peter Olson Mar 4 '11 at 1:14
@Peter - +1 for the most beautiful, convoluted method I've ever seen for calling three synchronous functions in sequence. –  lwburk Mar 4 '11 at 4:37
Thank you for expertly explaining the difference between async and sync js functions. This explains so much. –  jnelson May 25 '14 at 20:56

It sounds like you're not fully appreciating the difference between synchronous and asynchronous function execution.

The code you provided in your update immediately executes each of your callback functions, which in turn immediately start an animation. The animations, however, execute asyncronously. It works like this:

  1. Perform a step in the animation
  2. Call setTimeout with a function containing the next animation step and a delay
  3. Some time passes
  4. The callback given to setTimeout executes
  5. Go back to step 1

This continues until the last step in the animation completes. In the meantime, your synchronous functions have long ago completed. In other words, your call to the animate function doesn't really take 3 seconds. The effect is simulated with delays and callbacks.

What you need is a queue. Internally, jQuery queues the animations, only executing your callback once its corresponding animation completes. If your callback then starts another animation, the effect is that they are executed in sequence.

In the simplest case this is equivalent to the following:

window.setTimeout(function() {
    // set another timeout once the first completes
    window.setTimeout(function() {
    }, 1000);
}, 3000); // longer, but first

Here's a general asynchronous looping function. It will call the given functions in order, waiting for the specified number of seconds between each.

function loop() {
    var args = arguments;
    if (args.length <= 0)
    (function chain(i) {
        if (i >= args.length || typeof args[i] !== 'function')
        window.setTimeout(function() {
            chain(i + 1);
        }, 2000);


  function() { alert("sam"); }, 
  function() { alert("sue"); });

You could obviously modify this to take configurable wait times or to immediately execute the first function or to stop executing when a function in the chain returns false or to apply the functions in a specified context or whatever else you might need.

share|improve this answer
+1 Clearly, this is the best answer. Unfortunately, you didn't make it in the critical upvoting period. –  Peter Olson Apr 14 '11 at 20:28
Thanks that answers my question in another Post! +1 –  Awena Apr 24 '14 at 18:09

your functions should take a callback function, that gets called when it finishes.

function fone(callback){
...do something...


function ftwo(callback){
...do something...

then usage would be like:

   ..ftwo done...
share|improve this answer


I won't go into a deep discussion of setTimeout here, but:

  • in this case I've added the code to execute as a string. this is the simplest way to pass a var into your setTimeout-ed function, but purists will complain.
  • you can also pass a function name without quotes, but no variable can be passed.
  • your code does not wait for setTimeout to trigger.
  • This one can be hard to get your head around at first: because of the previous point, if you pass a variable from your calling function, that variable will not exist anymore by the time the timeout triggers - the calling function will have executed and it's vars gone.
  • I have been known to use anonymous functions to get around all this, but there could well be a better way,
share|improve this answer

Since you tagged it with javascript, I would go with a timer control since your function names are 3, 5, and 8 seconds. So start your timer, 3 seconds in, call the first, 5 seconds in call the second, 8 seconds in call the third, then when it's done, stop the timer.

Normally in Javascript what you have is correct for the functions are running one after another, but since it looks like you're trying to do timed animation, a timer would be your best bet.

share|improve this answer

Your Answer


