Javascript: How do you make function2 execute only after function1 is completely finished?

I have some code, with the order of the functions in the order I want them executed. However, they seem to at the same time (they begin sequentially within microseconds of eachother presumably).

The problem is that 开发者_如何学编程some of the functions include animations. How do I make it so the next function doesn't execute until the previous functions are completely finished???

Following is some of my code. I created a callback chain thinking that it would be the solution, but indeed it is not. The functions themselves call jQuery animations. I'm guessing i need to use some type of notofication from jQuery to tell me when animations are done. Anyhow, any advice is greatly appreciated!

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap', function() {
        open_box($target_open, event.value, '.wide-col', function() {
            hide_loader(function() {
                scroll_to_content($target_open, function() {
                });
            });
        });
    });
});

To be precise, I want the scroll_to_content() function to be executed after all the previous actions have been completed in their entirety. Currently, it executes at the same time as everything else, and therefore my page scroll is completely off because the size of my content continues changing after scroll_to_content() is finished.

Callback chains are basically the solution but I suspect you're not threading your callbacks correctly in your calls to jQuery. $.animate(...) has an optional complete callback-- that's where you want to pass the function that should execute after your initial animation finishes. All of the Effects in jQuery UI should have a similar optional argument.

You can use a similar pattern yourself in order to chain event handlers, for instance:

function handler(event, callback) {
  // do some work
  // ...
  callback();
}

This strategy for chaining function evaluations is called continuation-passing style and is handy in a lot of situations. Be careful using it, however, as many people find it more confusing to read than a traditional, sequential implementation.

http://api.jquery.com/queue/

Sorry, I don't have enough time to go into detail, but as the previous commenter said, queues are what you want to be focusing on to solve this problem.

you have 3 options:

1- Split your animations into multiple chained animate() calls. This is an example to clarify it for you.

2- Follow the answer posted by @dml.

3- Try to use this plugin to add delays between your calls (don't know if it can fix this scenario or not, give it a try) http://www.evanbyrne.com/article/jquery-delay-plugin