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/Liamatvenn/T3CTH/1/

这是一个不好的方法吗？这会占用访问者计算机上的更多资源吗？

Answer 1

这不是一个糟糕的方法，但它很难看（这是主观的），并且可能变得难以维护。我使用.promise()和.then()操纵的promise对象清理它，以避免嵌套回调：

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

或者，您可以使用queue：

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

jQuery中的嵌套回调

2 个答案: