jQuery.Deferredを使ってみた(難しい事抜き)

やってること

1. スタート
2. 赤いボックスを下に移動
3. 赤いボックスを右に移動
4. 赤いボックスを上に移動
5. 赤いボックスを左に移動

それぞれ移動処理の前後にログを出力。
処理開始前とかjQuery.animateのcompleteでログを出力してもいいんだけど、ここすらもDeferredで出力させてみた

<style type="text/css">
#testOuter{
    width:100%;
    height:700px;
    position:relative;
    }
#testLog{
    border:1px solid #cfcfcf;
    background-color:#fff;
    height:140px;
    overflow-y:scroll;
    }
#testBox{
    width:300px;
    height:250px;
    background-color:#f00;
    position: absolute;
    top:200px;
    left:0px;
    }
</style>

<div id="testOuter">
<div id="testLog"></div>
<div id="testBox"></div>
</div>

<script type="text/javascript">
var log = function() {
    var $log = $( '#testLog' );
    return function( s ) {
        $log.html( $log.html() + s + '<br>' );
    }
}();

( function() {
    log( 'Start' );
    return new $.Deferred().resolve().promise();
} )()
.then( function() {
    log( 'animate down' );
    return new $.Deferred().resolve().promise();
} )
.then( function() {
    var dfd = new $.Deferred;
    $( '#testBox' ).animate( {'top':'460px'}, 3000, function() {
        return dfd.resolve();
    } );
    return dfd.promise();
} )
.then( function() {
    log( '  -> animated down' );
    return new $.Deferred().resolve().promise();
} )
.then( function() {
    log( 'animate right' );
    return new $.Deferred().resolve().promise();
} )
.then( function() {
    var dfd = new $.Deferred;
    $( '#testBox' ).animate( {'left':'140px'}, 3000, function() {
        return dfd.resolve();
    } );
    return dfd.promise();
} )
.then( function() {
    log( '  -> animated right' );
    return new $.Deferred().resolve().promise();
} )
.then( function() {
    log( 'animate up' );
    return new $.Deferred().resolve().promise();
} )
.then( function() {
    var dfd = new $.Deferred;
    $( '#testBox' ).animate( {'top':'220px'}, 5000, function() {
        return dfd.resolve();
    } );
    return dfd.promise();
} )
.then( function() {
    log( '  -> animated up' );
    return new $.Deferred().resolve().promise();
} )
.then( function() {
    log( 'animate left' );
    return new $.Deferred().resolve().promise();
} )
.then( function() {
    var dfd = new $.Deferred;
    $( '#testBox' ).animate( {'left':'10px'}, 3000, function() {
        return dfd.resolve();
    } );
    return dfd.promise();
} )
.then( function() {
    log( '  -> animated left' );
    return new $.Deferred().resolve().promise();
} )
.then( function() {
    log( 'Fin' );
    return new $.Deferred().resolve().promise();
} )
;
</script>