Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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);     
    });
});
share|improve this question

4 Answers

up vote 0 down vote accepted

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();
    });
});
share|improve this answer
when i tried to run the above code, it gives an error of async is not defined. what should i do now!! – phenom_aks May 18 '12 at 12:21
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> – ThiefMaster♦ May 18 '12 at 12:41
thanks for your help bro.. it worked!! Thanks a ton! :) – phenom_aks May 18 '12 at 12:59
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote 
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.

share|improve this answer
up vote -1 down vote

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

share|improve this answer
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.) – Paul D. Waite May 18 '12 at 11:34
async: false is almost never "fine" (unless used in an on[before]unload event). – ThiefMaster♦ May 18 '12 at 11:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.