Question

我试图找出在我的网站上组织一堆AJAX方法的最佳方法。问题是我希望在收到每个回调后运行一堆回调。这是一个例子（假设每个方法异步运行）：

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

希望现在问题很明显。因为每个方法都是异步运行的，所以代码不会按顺序运行。相反，我希望传递下一个函数作为回调运行在运行它的函数后运行，我将不得不将越来越多的回调传递给第一个函数，具体取决于我希望在每个函数之后发生多少事情异步方法返回。例如，在这种情况下，我将不得不将两个回调传递给Log_in_user函数Log_in_user（get_user's_data，alert_user）。我在彼此之后运行的回调越多，我将需要传递给原始Log_in_user函数的回调越多。

是否有更模块化，更有条理的方式来做到这一点？

Answer 1

jQuery 1.5为您做到这一点，您可以使用.when（）

示例：

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.' );
    });

来自jsfiddle

Answer 2

为什么你不在服务器上进行组织？在客户端只做一次电话

LoginUserAndGetData

返回

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

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

Answer 3

我一直在为我的函数添加回调......

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

function thenThis() {
  // callback functionality
}

doThis( thenThis );

编辑：

对不起，我真的应该读完你需要做些什么......

什么时候处理纯粹的ajax调用是一个很好的选择，但是，如果需要在回调中发生额外的功能，我发现了一个不同的模式，可以帮助我组织我的代码...

// 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 );
});

这可能看起来有点多，但我对这种模式的想法是将所有回调和实际函数调用保留在文档中，并在my变量中。 jQuery是我选择的框架，所以我把它放在那里，因为我会......我愿意在这里思考，谢谢。

使用回调组织Javascript

3 个答案: