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

asynchronous-programmingjavascriptsynchronization

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.

Best Answer

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.

Related Topic