jQuery: Verketten von Animationen und AJAX-Anfragen

Question

Ich habe eine Produktlistenseite und möchte für jedes Produkt eine Detailansicht über AJAX laden und auf der Seite anzeigen. Ich habe einen komplexeren Satz von Bedingungen, mit denen ich Animationen erstellen möchte, aber ich werde es hier einfach halten.

Grundsätzlich, nach dem Klicken, möchte ich die AJAX-Anfrage ausführen und simultan animieren (in einigen Fällen eine Reihe von Animationen ...), die den Inhalts-Wrapper öffnen und einen "Lade" -Zustand zeigen. Sobald BEIDE von denen fertig sind, möchte ich dann reinschauen und den Inhalt animieren. Ich dachte jQuery Deferred Objects wäre der Weg zu gehen, aber ich habe kein gutes Verständnis für sie und meine Versuche haben mich nicht dahin gebracht, wo ich sein möchte.

Ich habe versucht, so etwas wie diese:

var dfr = $.Deferred(); 
dfr.then(function() { return wrapper.fadeIn(5000); }); 

$.when(dfr, $.get('/detail.html')) 
.then(function() { 
    console.log('All done, run additional animations...'); 
}); 

dfr.resolve(); 

... aber es wird, sobald die AJAX-Anforderung erfolgt, selbst wenn die Animation läuft noch ausgelöst.

Ich habe auch versucht diese:

var dfr = $.Deferred(); 
dfr.then(function() { return wrapper.fadeIn(5000); }); 
dfr.then(function() { return $.get('/detail.html'}) }); 
dfr.done(function() { console.log('All done, run additional animations...'); }); 
dfr.resolve(); 

... aber das führt nur alle der then/done Gespräche gleichzeitig. Ich habe auch versucht, in pipe anstelle der then Anrufe, vergeblich zu wechseln.

Ich würde gerne Deferred Objects verstehen (ist das überhaupt eine angemessene/beabsichtigte Verwendung für sie?) Und natürlich, wie ich meine Ziele für diese Seite erreichen kann. Jede Hilfe oder Tipps sind sehr geschätzt ....

Answer 1

Diese Seite hat ein Beispiel für genau das zu tun, was du redest: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Es ist mehr wie folgt aus:

function animateStuff() { 
    var dfd = $.Deferred(); 
    wrapper.fadeIn(5000, dfd.resolve); 
    return dfd.promise(); 
} 

$.when(animateStuff(), $.get("/whatever")) 
    .then(function() { 
     // do something really great 
}) 

Answer 2

Es kann helfen, einen Handler zu registrieren, wenn Sie Ihre AJAX-Anfragen beendet haben:

$('.content').ajaxStop(function() { 
    animateContent(); 
}); 

Mehr auf .ajaxStop() here

Answer 3

jQuery Sammlungen sind beobachtbar (sie haben eine promise Methode). So können Sie dies ganz einfach:

$.when(wrapper.fadeIn(5000), $.get("/whatever")).done(function() { 
    // animation and ajax request complete 
}); 

Wenn Sie Ketten Animationen auf verschiedene Elemente benötigen, verwenden .pipe():

function chainAnim() { 
    return wrapper.fadeIn(5000).promise().pipe(function() { 
     return internal.fadeIn(1000); 
    }); 
} 

chainAnim().done(function() { 
    // wrapper than internal faded in 
}); 

Sie noch $ .when, natürlich verwenden können:

$.when(chainAnim(), $.get("/whatever")).done(function() { 
    // animation and ajax request complete 
});