// 定义主题

var subject = (function(){

    var dfd = $.Deferred();

    var task = function()

    {

        // 发布内容

        dfd.resolve("Alice");

    }

    setTimeout( task, 3000);

    return dfd.promise();

})();

// 两个观察者

var fn1 = function(content){

    console.log("fn1: " + content );

}

var fn2 = function(content){

    console.log("fn2: " + content );

}

// 注册观察者

$.when( subject )

.done( fn1 )

.done( fn2 );

// 定义主题

var subjectAlice = (function(){

    var dfd = $.Deferred();

    var task = function()

    {

        // 发布内容

        dfd.resolve("Alice");

    }

    setTimeout( task, 3000);

    return dfd.promise();

})();

var subjectTom = (function(){

    var dfd = $.Deferred();

    var task = function()

    {

        // 发布内容

        dfd.resolve("Tom");

    }

    setTimeout( task, 1000);

    return dfd.promise();

})();

// 两个观察者

var fn1 = function(content1, content2){

    console.log("fn1: " + content1 );

    console.log("fn1: " + content2 );

}

var fn2 = function(content1, content2){

    console.log("fn2: " + content1 );

    console.log("fn2: " + content2 );

}

// 注册观察者

$.when( subjectAlice, subjectTom )

.done( fn1 )

.done( fn2 );

$.when(

    $.ajax( "/main.php" ),

    $.ajax( "/modules.php" ),

    $.ajax( "/lists.php" )

).then(successFunc, failureFunc);

$.when(

    $.ajax( "/main.php" ),

    $.ajax( "/modules.php" ),

    $.ajax( "/lists.php" )

).then(function (resp1, resp2, resp3){

    console.log(resp1);

    console.log(resp2);

    console.log(resp3);

});

deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

then()和done()的区别

在jQuery 1.8之后，then()返回一个新的deferred对象，而done()返回的是原有的deferred对象。

如果then()指定的回调函数有返回值，该返回值会作为参数，传入后面的回调函数。

例如：如下代码：

var defer = jQuery.Deferred();

defer.done(function(a,b){

            return a * b;

}).done(function( result ) {

            console.log("result = " + result);

}).then(function( a, b ) {

            return a * b;

}).done(function( result ) {

            console.log("result = " + result);

}).then(function( a, b ) {

            return a * b;

}).done(function( result ) {

            console.log("result = " + result);

});

defer.resolve( 2, 3 );

返回的结果为：

result = 2 
result = 6 
result = NaN

分析：

1)上面的第一个result是第一个result的最后一个done()的输出，前一个done的return不会传递到这里，所以result是resolve的第一个参数
2)第二个result是第二个deferred的输出，第一个then所带的function的输入，传入第二个deferred，因此第五个done能够接受到2*3的result。
3)第三个result是第三个deferred的输出，第二个then执行时，只有a，没有b(上一个then执行时返回的是a*b,所以再第三个then执行时只有a，没有b)，所以result是NaN。

综合例子如下：

    var requestInfo = function() {

        var defered = $.Deferred();

        var url = "https://api.ffan.com/activity/v1/homepage/index";

        $.ajax(url, {

            dataType: "jsonp",

            jsonp: "callback",

            timeout: 5000,

            data: {

                type: "cityList"

            }

        }).then(function(response) {

            if (response && response.data && response.data[0]) {

                defered.resolve(response.data[0].cityList);

            }

        })

        return defered.promise();

    }

var cityInfo = function(result) {

        var list = _.groupBy(result, function(city) {

            return city.cityPinYin.charAt(0).toUpperCase();

        });

        _.each(list,function(city,key){

            console.log(key);

            _.each(city,function(item,index){

                console.log("item.cityId="+item.cityId);

                console.log("item.cityName="+item.cityName);

            })

        })

        //获取第一条数据的cityId

        var cityId=list["A"][0].cityId;


        //返回值，供下一个then调用

        return {

            id:cityId

        }

    }

 var info=function(result){

        var id=result.id;//上一个then返回的值

        console.log("cityid="+id);

        return true;

    }

调用：

 $.when(requestInfo())

        .then(cityInfo)

        .then(info);