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对象清理它,用.promise()和操作.then(),以避免嵌套的回调:

的jsfiddle

$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();
});

或者,您可以使用队列:

的jsfiddle

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();

Answer 2

@KevinB已经展示了如何以更方便的形式编写回调金字塔.然而,剧本仍然非常重复.更好:

var p = new $.Deferred().resolve();
$.each([
    [$marker, 100],
    [$america, 150],
    [$england, 80],
    [$australia, 300]
], function(_, x) {
    p = p.then(function() {
        return x[0].animate({
            top : x[1]+'px'
        }, 500, 'easeOutBounce').promise();
    });
});