javascript - jQuery のネストされたコールバック

Question

アニメーションマップを作成しようとしています。

マップにドロップするポイントがあり、それらはすべてコールバックで実行されます...

 // Animate the drops
$marker.animate({
    top : '100px'
}, 500, 'easeOutBounce', function(){
    $america.animate({
        top : '150px'
    }, 500, 'easeOutBounce', function(){
        $england.animate({
            top : '80px'
        }, 500, 'easeOutBounce', function(){
            $australia.animate({
                top : '300px'
            }, 500, 'easeOutBounce');
        });
    });
});

http://jsfiddle.net/Liama​​tvenn/T3CTH/1/

これは悪い方法ですか？これにより、訪問者のコンピューターでより多くのリソースが消費されますか?

Answer 1

これは悪い方法ではありませんが、見苦しく (主観的なものです)、保守が難しくなる可能性があります。ネストされたコールバックを避けるために、.promise()andで操作される promise オブジェクトでクリーンアップします。.then()

jsフィドル

$marker.animate({
    top : '100px'
}, 500, 'easeOutBounce').promise()
.then(function(){
    return $america.animate({
        top : '150px'
    }, 500, 'easeOutBounce').promise();
})
.then(function(){
    return $england.animate({
       top : '80px'
   }, 500, 'easeOutBounce').promise();
})
.then(function(){
   return $australia.animate({
       top : '300px'
   }, 500, 'easeOutBounce').promise();
});

または、キューを使用できます。

jsフィドル

var $queue = $("<div>");
$queue.queue(function(next){
    $marker.animate({
        top : '100px'
    }, 500, 'easeOutBounce',next);
}).queue(function(next){
    $america.animate({
        top : '150px'
    }, 500, 'easeOutBounce',next);
}).queue(function(next){
    $england.animate({
        top : '80px'
    }, 500, 'easeOutBounce',next);
}).queue(function(next){
    $australia.animate({
        top : '300px'
    }, 500, 'easeOutBounce',next);
}).dequeue();