Wait for function to finish before executing the rest

Question

When the user refreshes the page, defaultView() is called, which loads some UI elements. $.address.change() should execute when defaultView() has finished, but this doesn't happen all the time. $.address.change() cannot be in the success: callback, as it's used by the application to track URL changes.

defaultView();

function defaultView() {
    $('#tout').fadeOut('normal', function() {
        $.ajax({
            url: "functions.php",
            type: "GET",
            data: "defaultview=true",
            async: false,
            success: function (response) {
                $('#tout').html(response).fadeIn('normal');
            }
        });
    });
}

$.address.change(function(hash) {
    hash = hash.value;
    getPage(hash);
});

I'm at a loss as to how to make $.address.change() wait for defaultView() to finish. Any help would be appreciated.

You can't do this. You've got two asynchronous events going on here: the fadeOut of #tout, and the AJAX request. A synchronous AJAX request is the least desirable piece of Javascript code I can think of. The only way of doing this is to put `$.address.change()` in the success callback of the AJAX request, so another approach is needed. — Matt, Apr 25 '10 at 22:11
`async: false,` is there by error - I was trying how it affected the script. Didn't make any difference, and I removed it. — Wurlitzer, Apr 25 '10 at 22:19

score 3 · Answer 1 · answered Apr 25 '10 at 21:56

3

Call it in the success or complete callback. Using delay for timing a callback is unreliable at best. You might even need to put the call to it in the callback to the fadeIn function inside of the success callback.

It doesn't have to be defined inside the success callback, just executed. Both contexts will still be able to use it.

answered Apr 25 '10 at 21:56

Alex Sexton

10,401
2
29
41

hasn't Wurlitzer said " $.address.change() cannot be in the success: callback " – ScottE Apr 25 '10 at 22:05
Alex, $.address.change() can't be in the success callback, sadly. It is part of this plugin: http://www.asual.com/jquery/address/ which tracks hash changes every time a link is clicked. – Wurlitzer Apr 25 '10 at 22:14
That is the only solution. It's asynchronous programming 101. You should likely be using a more recent hash history plugin like jquery BBQ. Even with address, you can make a call to the address change in that callback. Just write the code for it... – Alex Sexton Apr 25 '10 at 22:47

score 2 · Answer 2 · edited May 23 '17 at 12:30

2

I too was told that because of async you can't make javascript "wait" -- but behold an answer :D ...and since you're using jQuery, all the better:

use jQuery's bind and trigger. I posted an answer to a similar problem at How to get a variable returned across multiple functions - Javascript/jQuery

edited May 23 '17 at 12:30

Community

1
1

answered Aug 22 '10 at 05:49

Kyle Cureau

19,028
23
75
104

score 0 · Answer 3 · answered Apr 25 '10 at 22:04

0

One option is to hide the $.address (I'm guessing this is a drop-down list) via css, and show it inside the success callback from the ajax method.

answered Apr 25 '10 at 22:04

ScottE

21,530
18
94
131

Wait for function to finish before executing the rest

3 Answers3