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

이 이것에 대해 갈 나쁜 방법이다

? 이것은 방문자의 컴퓨터에서 더 많은 리소스를 차지합니까?

Answer 1

그것은 나쁜 방법은 아니지만 추악한 (주관적인) 것이며 유지하기가 어려워 질 수 있습니다.

jsFiddle

: 당신이 queue를 사용할 수

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

을 또는 : 나는 중첩 된 콜백을 방지하기 위해, .promise() 및 .then()과 조작, 약속 개체를 정리 것

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