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 对象清理它，用.promise()and操作.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();
    });
});