How can I call multiple asynchronous javascript functions in sequence?

Question

I am trying to call the following functions sequentially, but they don't necessarily return in the correct order.

I then learned about asynchronous functions which can be called sequentially using "callbacks".

How can I make these functions execute in sequence using callbacks?

$.getJSON('http://localhost/search_data.php?title='+title+'&run=annotations&jsoncallback=?', function(r1){
    $.each(make_all_titles3(r1), function (i,v) {
        $vpl.append(v);     
    });
});

$.getJSON('http://localhost/search_data.php?title='+title+'&run=Link&jsoncallback=?', function(r2){
    $.each(make_all_titles3(r2), function (i,v) {
        $vpl.append(v);     
    });
});

$.getJSON('http://localhost/search_data.php?title='+title+'&user='+user+'&run=bookmarks&jsoncallback=?', function(r3){
    $.each(make_all_titles3(r3), function (i,v) {
        $vpl.append(v);     
    });
});

$vpl.append('<div>Related Terms</div>');

$.getJSON('http://localhost/context-search.php?title='+title+'&jsoncallback=?', function(r4){
    $.each(make_all_titles3(r4), function (i,v) {
        $vpl.append(v);     
    });
});

ThiefMaster · Accepted Answer · 2012-05-18 11:46:27Z

2

The easiest solution would be simply nesting the calls. Scroll down for a clean and readable solution.

function _process(r) {
    $.each(make_all_titles3(r), function (i, v) {
        $vpl.append(v);
    });
}

$.getJSON('http://localhost/search_data.php?title=' + title + '&run=annotations&jsoncallback=?', function (r) {
    _process(r);
    $.getJSON('http://localhost/search_data.php?title=' + title + '&run=Link&jsoncallback=?', function (r) {
        _process(r);
        $.getJSON('http://localhost/search_data.php?title=' + title + '&user=' + user + '&run=bookmarks&jsoncallback=?', function (r) {
            _process(r);
            $vpl.append('<div>Related Terms</div>');
            $.getJSON('http://localhost/context-search.php?title=' + title + '&jsoncallback=?', function (r) {
                _process(r);
            });
        });
    });
});

Now the clean and readable one, using the async library:

var load = [
    { url: 'http://localhost/search_data.php?title=' + title + '&run=annotations&jsoncallback=?', before: null },
    { url: 'http://localhost/search_data.php?title=' + title + '&run=Link&jsoncallback=?', before: null },
    { url: 'http://localhost/search_data.php?title=' + title + '&user=' + user + '&run=bookmarks&jsoncallback=?', before: null },
    { url: 'http://localhost/context-search.php?title=' + title + '&jsoncallback=?', before: function() { $vpl.append('<div>Related Terms</div>'); } }
];

async.forEachSeries(load, function(item, next) {
    if(item.before) {
        item.before();
    }
    $.getJSON(item.url, function(r) {
        $.each(make_all_titles3(r), function (i, v) {
            $vpl.append(v);
        });
        next();
    });
});

edited May 18, 2012 at 11:46

answered May 18, 2012 at 11:35

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

phenom_aks Over a year ago

when i tried to run the above code, it gives an error of async is not defined. what should i do now!!

ThiefMaster Over a year ago

As I said, you need the async library and include it on your page. <script src="https://raw.github.com/caolan/async/master/dist/async.min.js"></script>

Community · Accepted Answer · 2017-05-23 12:00:49Z

0

See my question here: About Node's code style
And I provide a helper function for making embedded callbacks called in line.
It works both for NodeJS and browser JS.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered May 18, 2012 at 11:36

Kevin

1,14711 silver badges21 bronze badges

Comments

MirrorMirror · Accepted Answer · 2012-05-18 11:47:26Z

0

ajaxcall1(parameter, function() {
    ajaxcall2(parameter, function() {
        ajaxcall3(parameter, function() {
            alert("lol");
        };
    };
});

Explanation: call the 2nd ajax call when the first returns its result and the 3d when the 2nd returns.

edited May 18, 2012 at 11:47

answered May 18, 2012 at 11:37

MirrorMirror

1888 gold badges38 silver badges73 bronze badges

Comments

Dasarp · Accepted Answer · 2012-05-18 11:29:45Z

-1

use ajax async false option

$.ajaxSetup({ async: false });
    // put your three get methods here
$.ajaxSetup({ async: true });

NOTE: this will halts your dynamic page functionality until your total code block's execution completes

answered May 18, 2012 at 11:29

Dasarp

1941 silver badge5 bronze badges

2 Comments

Paul D. Waite Over a year ago

I presume the downvotes are because the OP asked about how to achieve his/her aim with callbacks, but the async option will also make the functions execute sequentially, so I think this answer is just fine. (You might want to make clear that you’re offering an alternative solution to callbacks.)

ThiefMaster Over a year ago

async: false is almost never "fine" (unless used in an on[before]unload event).

Collectives™ on Stack Overflow

How can I call multiple asynchronous javascript functions in sequence?

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related