How to nest asynchronous functions based on array?

Question

I have a async function that breaks it's callbacks into an object success and error, this function takes one param (besides the callback) "pink".

async("pink",{
    success:function(){

    },
    error:function(){

    }
});

I want to make plural version of this function that takes in an array and returns the true or false value for the async action.

asyncs(["blue","red","green"],function(values){
    console.log(values); // [true,true,true];
});

The trick is that each acync action needs to be within the next, the value of the function (true or false) needs to be pushed() into a "global" (higher in scope) variable values and the returned in a master callback(values) at the end (when the count reaches the array length)

This is a very rudimentary way of nesting each async() function and returning the values, it is limited because it manually trails only 3 array values.

var asyncs = function(params,mstrCB){
    var length = params.length;
    var values = [];
    async(param[0],{
        success:function(){
            values.push(true);
            async(param[1],{
                success:function(){
                    values.push(true);
                    async(param[2],{
                        success:function(){
                            values.push(true);
                            mstrCB(values);
                        },
                        error:function(){
                            values.push(false);
                            mstrCB(values);
                        }
                    });
                },
                error:function(){
                    values.push(false);
                     mstrCB(values);
                }
            });
        },
        error:function(){
            values.push(false);
            mstrCB(values);
        }
    });
};

if you are going to do this more often (and you are) i suggest you use this great little lib: github.com/willconant/flow-js — mkoryak
– mkoryak, Commented Nov 29, 2012 at 17:24

I Hate Lazy · Accepted Answer · 2012-11-29 16:06:46Z

1

Use a counter instead of manually nesting. Put the request in its own function, and up on each success, increment the counter and if it's less than length, make a new request.

When i === length, call the mstrCB().

var asyncs = function(params,mstrCB){
    var length = params.length;
    var values = [];
    var i = 0;

    if (length)
        makeRequest();

    function makeRequest() {
        async(params[i], {
            success:function(){
                values.push(true);

                 // Increment the counter
                i++;

                if (i === length)  // we're at the end
                    mstrCB(values);
                else
                    makeRequest(); // there's still more, so make another request
            },
            error:function(){
                values.push(false);
                mstrCB(values);
            }
        });
    }
};

answered Nov 29, 2012 at 16:06

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

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

1 Comment

ThomasReggi Over a year ago

This is exactly what I had in my mind, I just couldn't visualize it.

Collectives™ on Stack Overflow

How to nest asynchronous functions based on array?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related