jQuery: pobierz rozstrzygnięcie z $ .Deferred zawartego w funkcji - jquery, odroczone

Jeśli mam $ .Deferred z kilkoma powiązanymi obietnicami w funkcji i wywołuję tę funkcję, to skąd mam wiedzieć, kiedy ta Odroczona zostanie rozwiązana? Na przykład : http://jsfiddle.net/5AWK4/

jQuery(function($){
var $div = $("<div>hello world</div>").appendTo("body");

var test = (function(){
var dfd = new $.Deferred();
dfd.then(function(){
return $div.animate({width:300}, 5000, "swing", function(){return $div.append("<br>line 1");});
})
.then(function(){
return $div.append("<br>line 2");
});
return dfd.resolve();
});

$.when(test()).then(function(){
$div.append("<br>line 3");
});

});

Po uruchomieniu tego kodu mam następujące elementy:

Witaj świecie
wiersz 3
linia 1
linia 2

Oczekuję, że wyświetli się „wiersz 3”po rozwiązaniu mojego Odroczonego zwróconego przez moją funkcję. Próbowałem zwrócić tylko dfd w funkcji i wywołanie testu (). Resol (), ale to też nie działa.

Z góry dziękuję

Odpowiedzi:

Najpierw utworzysz obiekt odroczony, a następnie zwrócisz obietnicę tego obiektu odroczonego, a później powiesz, że po zakończeniu jakiejś metody asynchronicznej rozwiązujesz tę obietnicę:

jQuery(function($){
var $div = $("div");

var test = (function(){
var dfd = new $.Deferred();
$div.animate({width:300}, 5000, "swing", function(){
dfd.resolve(); //line 3 will printed now, i.e. before line 1
$div.append("<br>line 1"); //line 1 will be printed after the promise has been resolved
});
return dfd.promise();
});

$.when(test()).then(function(){
$div.append("<br>line 3");
});
});

SKRZYPCE

Teraz, append() jest operacją synchroniczną, więc nie wymaga obietnicy, a program animowany ma wbudowane wywołanie zwrotne, dzięki czemu można osiągnąć to samo, wykonując:

jQuery(function($){
var $div = $("div");

var test = function(elem, callback){
elem.animate({width:300}, 5000, "swing", function(){
callback();
});
};

test($div, function() {
$div.append("<br>line 1");
$div.append("<br>line 2");
$div.append("<br>line 3");
});
});

SKRZYPCE