Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.

share|improve this question
    
Why the close vote? Please leave a comment and explain... –  Martin Feb 26 '13 at 13:27
2  
The close vote wants to migrate this to Stack Overflow. This is probably due to be specific to Javascript. Since it's more about the algorithm in my view, I'm inclined to let it stand but others may disagree. –  World Engineer Feb 26 '13 at 13:33
    
OK, I can understand that. Thanks. –  Martin Feb 26 '13 at 13:35
add comment

5 Answers

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.

share|improve this answer
    
Thanks, you are right about the readability. And right know my code is an ugly mixture of inline and outside functions. I hate it. –  Martin Feb 26 '13 at 14:52
    
@Martin It's kind of inevitable with Javascript and any language that relies so heavily on asynchronous calls. The best you can do is to name everything sensibly and document everything that is not plainly obvious from read the code with a comment explaining what it does. –  DaveRandom Feb 26 '13 at 15:00
    
Yeah that will be my next step. I hope that there won't be too much synchronization issues, because I will be firing asynchronous calls withing a for loop. (Wish me luck :) ) –  Martin Feb 26 '13 at 15:04
add comment

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.

share|improve this answer
    
Thanks. I'll try this. –  Martin Feb 26 '13 at 15:07
    
Also, there's a library called Step that does something similar: github.com/creationix/step –  Izkata Feb 27 '13 at 18:59
add comment

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.

share|improve this answer
    
Here is an example of how to do this with deferreds: jsfiddle.net/M5z4z –  TwentyMiles Feb 27 '13 at 17:42
add comment

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)

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.