Witajcie,

mam taką oto zagwostkę:

Mamy sobie stronkę, która po kliknięciu na pewne linki Ajaxem ładuje treść do div-a. By ładnie to wyglądało, chcemy by aktualna treść najpierw płynnie zniknęła, a następnie płynnie pojawiła się nowa. Najprostsza implementacja tego problemu to wywołanie zdarzenia Ajax jako callback fadeOut (lub animate z opacity:0, wedle uznania). Później jako callback Ajaxa mamy fadeIn / animate z opacity:1 i wszystko działa pięknie.

No właśnie, ale rozwiązanie to można udoskonalić zaczynając ładowanie treści Ajaxem w momencie kliknięcia, a nie dopiero jak obecna treść zaniknie. Zaoszczędzamy w ten sposób cenny czas użytkownika (dokładniej czas równy długości animacji), jednak pojawia się pewien problem. Otóż odpowiedź serwera może przyjść w jednym z dwóch momentów: 1) kiedy treść została już wygaszona, lub 2) jeszcze podczas zanikania.

Pytanie to: Jak to ładnie zsynchronizować? Callback Ajaxowy powinien sprawdzać czy jesteśmy już graficznie gotowi na zaprezentowanie nowej treści (div zanikł), a callback fadeOut powinien sprawdzać czy mamy już dane do pokazania.

Dodatkowe pytanie, które chciałbym Wam zadać, to jak rozwiązujecie w jQuery kwestię przerywanych żądań asynchronicznych? Jeżeli mówimy - jak w przykładzie - o wczytywaniu treści z linków, to bez sensu jest używać za każdym razem nowego obiektu XMLHttpRequest. Gdy użytkownik klika w linki tak szybko, że powstaje nam kilka żądań, zachowanie skryptu staje się bezsensowne. Do tej pory używałem czegoś na kształt:

[JAVASCRIPT] pobierz, plaintext 
var xhr;
if(xhr !== undefined) {
	xhr.abort();
}
xhr = $.ajax(...);
[JAVASCRIPT] pobierz, plaintext 

Czy jest jakaś bardziej elegancka metoda?