javascript - jQuery 中的嵌套回调

Question

<分区>

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

或者，您可以使用 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();