Is it possible to half-way synchronize javascript functions that include async calls?

Question

I am wondering if there exists a way to half way synchronize javascript functions, where data is requested on the fly. I don't want to make it purely blocking (which I guess is impossible), I just want a nice way to write the overall algorithm in one piece.

Let's take the following example:

function(){
    command1;
    var x1 = something;
    async_function(x1, callback1);
}
function callback1(data){
    var x2 = command2(data);
    async_function2(x2, callback2);
}
function callback2(data1){
    command3(data1);
}

I would like to write something like:

function(){
    command1;
    var x1 = something;
    call(async_function, [x1], callback1);
    var x2 = command2(data);
    call(async_function2, [x2], callback2);
    command3(data1);
}

• I tried playing around with the caller property of functions, but I'm not familiar enough with the execution environment.
• I also tried writing a function "call" like above, using the apply function to pass in a custom callback which returns the result of the async function to it's caller.

What bugs me is that while programming\debugging, I have to follow the code from one function into another into another (just like the movie inception). I want one place to write the high-level algorithm without decomposing it into many functions.
For example, If I want to write A* algorithm, but the "getNeighbors" function is asynchronous.

Answer 1

Since what you are really talking about here is a stylistic/readability issue (at least, that's the way I read it), you might be a little out of luck, because all the all alteratives I can think of aren't great.

Really you have two options, write multiple distinct functions like you have done above, or use closures to bring it all "inline" (as it were), where you will quickly run into issues with keeping the horizontal whitespace sane.

That being said, if you really do want to keep it all in a single block that looks like one procedure, I would probably go with the closure option:

function(){
    command1;
    var x1 = something;
    async_function(x1, function (data){
        var x2 = command2(data);
        async_function2(x2, function (data1){
            command3(data1);
        });
    });
}

Which could of course be spaced out like this, quite close to your desired example:

function(){
    command1;
    var x1 = something;
    async_function(x1, function (data){
    var x2 = command2(data);
    async_function2(x2, function (data1){
    command3(data1);
    });});
}

...but personally I would probably try and stick to the first version.

In general though I wouldn't do either. I would keep it broken down into small and obviously named routines, I find it makes for much more readable code in the long run and any sane IDE will allow you to jump from function call to function definition and vice versa, so navigation shouldn't be too much of an issue.

Answer 2

I can't guarantee that this would solve the issues you're running into, but Queuing is often used to chain a series of asynchronous calls so that they happen one after another.

I wrote a Queue script a while ago which I will be using as an example:

(function () {
    var q = new Queue();
    q.queue(function (next) {
        //this gets run first
        //next is used to dequeue the next item in the queue
        someAsyncCall(someData, /*callback*/next);
    }, function (next) {
        //this gets run second
        someOtherAsyncCall(moreData, next);
    }, function (next) {
        //this gets run third
        moarAsync(allthedata, next);
    });
}());

Queues allow for code flow to be written in a linear fashion without massive amounts of nesting. This particular implementation doesn't handle data passing directly.

Answer 3

You should look into Deferreds.

You can implement your functions and execute them sequentially, regardless of the fact the the code inside the function is async. Once the first finishes the second will be triggered and so on.

Answer 4

If you you don't mind adding a compilation step to your workflow, you can look towards using one of the sync-to-async compilers from this list:

https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS

(go to the "Synchronous to Asynchronous JavaScript Compilers" section)

Using a library based solution is OK most of the time but using an async-aware dialect will make the code as "sync-like" as possible. (this is most noticeable if you have lots of loops or jumps, like return or break statements. In those cases it can be annoying to write things using continuations)

Answer 5

If I understand you right, you are talking about piping async calls.

This can be done with so-called Deffered objects, as @rusev mentioned. Here is an example combining blocking and async stuff together:

var dfd = $.Deferred();

dfd.pipe(function (data) {
    // Normal blocking computations...
    var result = data.a + data.b;
    var output = $('<p>').text('Add: ' + result);
    $('body').append(output);

    return result;
}).pipe(function (data) {
    // Async AJAX call...
    return $.post('/echo/json/', { json: '{ "value": ' + data + ' }' });
}).pipe(function (data) {
    // Again some normal computations...
    var result = data.value * data.value;
    var output = $('<p>').text('Square: ' + result);
    $('body').append(output);

    return result;
}).pipe(function (data) {
    // AJAX...
    return $.post('/echo/json/', { json: '{ "value": ' + data + ' }' });
}).pipe(function (data) {
    // Normal...
    var result = data.value + 1;
    var output = $('<p>').text('Increment: ' + result);

    $('body').append(output);
});

dfd.resolve({a: 1, b: 2}); // Initial values

http://jsfiddle.net/sRFRC/

As yu can see, data is passed sequentially from one callback to another, but you don't have to write it in a nested fashion.

Answer 6

Take a look on Promises/A+ https://promisesaplus.com/. Nice implementation of Promises/A+ instead of coming ecma6 native support is https://github.com/tildeio/rsvp.js/