Organizing Javascript with callbacks

Question

I am trying to figure out the best way to organize a bunch of AJAX methods on my site. The problem is that I want to run a bunch of callbacks after each one is received. Here's an example (assume each method runs asynchronously):

Log_in_user
    if response received and call was successful
        get_user's_data
            if response received and call was successful
                alert user

Hopefully by now the problem is clear. Because each method runs asynchronously, the code will not run in order. If instead, I want to pass the next function to run as a callback to run after the function that proceeds it, I will have to pass an increasingly large number of callbacks to the first function depending on how many things I want to happen after each asynchronous method returns. For example, in this case, I will have to pass two callbacks to the Log_in_user function Log_in_user(get_user's_data,alert_user). The more callbacks I have running after each other, the more callbacks I will have to pass to the original Log_in_user function.

Is there a more modular and better organized way to do this?

Guilherme Serrano · Accepted Answer · 2011-02-25 18:34:43Z

6

jQuery 1.5 do that for you, you can use .when()

Example:

function doAjax(){
    return $.get('/echo/html/');
}

function doMoreAjax(){
    return $.get('/echo/html/');
}

$.when( doAjax(), doMoreAjax() )
    .then(function(){
        console.log( 'I fire once BOTH ajax requests have completed!' );
    })
    .fail(function(){
        console.log( 'I fire if one or more requests failed.' );
    });

From jsfiddle

edited Feb 25, 2011 at 18:34

answered Feb 25, 2011 at 18:19

Guilherme Serrano

1364 bronze badges

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

1 Comment

user531065 Over a year ago

Ah so in this case $.when will run .then(... only when doAjac() and doMoreAjac() both return successfully? I assume if I put 100 functions in here, it would only run .then(... when all 100 return successfully? I think this is a really good solution. Thank you!

Luke · Accepted Answer · 2011-02-25 18:22:58Z

0

why you don´t orgenize this on the server? Do on client side just one call

LoginUserAndGetData

return

{hasErrors: false, userLoggedIn: true, userName : "User", data : {}}

{hasErrors: true, errorMessage: "SomeText", errorCode : "Something you can work with"}

answered Feb 25, 2011 at 18:22

Luke

8,4173 gold badges24 silver badges36 bronze badges

1 Comment

user531065 Over a year ago

This would work in some cases but for the case I'm talking about, I need to take different actions at each stage. For example, if the first callback returns unsuccessfully, I might want to do something differently than if all 3 return unsuccessfully.

sic1 · Accepted Answer · 2011-02-25 20:35:20Z

I have been adding callbacks to my functions like this...

function doThis( cb ) {
  // do stuff here
  if ( typeof cb === 'function' ) cb();
}

function thenThis() {
  // callback functionality
}

doThis( thenThis );

EDIT:

Sorry, I really should have read through what you needed to do a bit more...

When is a great option for handing pure ajax calls, but, if extra functionality needs to happen in the callbacks, i have found a different patter that helps me organize my code...

// Log_in_user
//     if response received and call was successful
//         get_user's_data
//             if response received and call was successful
//                 alert user

var ajax = {
        logIn : function( cb ) {
            $.ajax({
                // params
            }).success( parseCB ).error( this.errorCB );
            function parseCB( doc ) {
                // logic
                if ( typeof cb === 'function' ) cb();
            }
        },
        userData : function( cb ) {
            $.ajax({
                // params
            }).success( parseCB ).error( this.errorCB );
            function parseCB( doc ) {
                // logic
                if ( typeof cb === 'function' ) cb();
            }
        },
        errorCB : function(){
            // logic
        }
    },
    my = {
        init : function() {
            ajax.logIn( this.done.logIn );
            if ( typeof cb === 'function' ) cb();
        },
        done : {
            logIn : function() {
                ajax.userData( this.done.userData );
            },
            userData : function() {
                // Do stuff with user data, then run my.done.page (the final callback)
                alert( 'user data recieved' );
            },
            page : function() {
                // set up clicks, or whatever else you need
                alert( 'everything is done' );
            }
        }
    };

$( function() {
    my.init( my.done.page );
});

This may seem like a bit much, but my thoughts with this pattern is to keep all my callback and actual function calls within the document ready, and within the my variable. jQuery is my framework of choice, so i put it out there as i would...i'm open to thought here, thanks.

Collectives™ on Stack Overflow

Organizing Javascript with callbacks

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related