Używanie jquery odroczonej do synchronizacji animacji i ajaxu

Question

Próbuję zrozumieć moją koncepcję deferred i próbuję użyć jej do zsynchronizowania animacji fadeIn/fadeOut wraz z wywołaniem Ajax.

Zasadniczo mam przełączanie treści na stronie idzie:

1. Fetch zawartość z ajax
2. W odpowiedzi Fadeout
3. Wymień zawartość
4. FadeIn

Jednakże, jeśli dobrze rozumiem deferred s prawo Mogę być w stanie zrobić coś takiego:

1. Fadeout, a jednocześnie zainicjować Fetch treść z ajax
2. Gdy zarówno Fadeout a zawartość Fetch są kompletne: Zmiana zawartości
3. FadeIn

Niektóre kodu oryginalnego rozwiązania:

$.get(url, function(page) { 
    $('#content').fadeTo(100, 0, 'linear', function() { 
     $(this).html(page.text).fadeTo(400, 1, 'linear'); 
    }); 
} 

staram się zrobić coś takiego:

var deferred1 = $.get(url); 
var deferred2 = $('#content').fadeTo(100, 0, 'linear').promise(); 

$.when(deferred1, deferred2).done(function() { 
    $('#content').html(page.text).fadeTo(400, 1, 'linear'); 
}); 

Po prostu nie wiem, jak go używać. I czy powinienem użyć done, czy potem? Czy powinienem używać rur w sprytny sposób? Czy potrzebuję promise?

Jaki byłby bardziej "standaryzowany" sposób wdrożenia tego?

Answer 1

Gdy używasz $.when (Wiem, śmieszne zdanie;)), to wartości, z którymi są rozwiązane obietnice, są przekazywane jako argumenty do funkcji zwrotnych. To znaczy. w twoim oddzwanianiu done, pierwszy argument odnosi się do rozwiązanej wartości deferred1 i drugiego argumentu do deferred2 (cokolwiek to jest).

Teraz, gdy sukces zwrotna Ajax nazywa, to zostanie przeniesiony trzy argumenty:

• odpowiedź
• tekst statusu
• przedmiotem jqXHR

Jesteś zainteresowany tylko na początku.

Więc z tego, twoja konfiguracja powinna być:

var promise1 = $.get(url); 
var promise2 = $('#content').fadeTo(100, 0, 'linear').promise(); 

$.when(promise1, promise2).done(function(ajax_success) { 
    $('#content').html(ajax_success[0]).fadeTo(400, 1, 'linear'); 
}); 

Również spojrzeć na $.when documentation.

---

Czy muszę promise?

Nie. Wygląda na to, żedzwoni wewnętrznie po pobraniu kolekcji jQuery. Ale w innych przypadkach musiałbyś, więc warto to zrobić tutaj również, dla spójności (dzięki Alnitak).

A powinienem ...? Czy powinienem ...? Co by było ...?

Nie ma standardowego rozwiązania dla tego rodzaju problemów. Obietnice są niewiarygodnie elastyczne i można z nich korzystać na wiele sposobów. I Myślę, że nie są wystarczająco długie w JavaScript, aby pojawiły się standardowe wzorce. Znajdź/utwórz coś, co ma dla ciebie sens i zachowaj spójność w swojej aplikacji.

Jedyna rzecz, którą polecam zrobić, jeśli masz wiele obietnic, umieszcza je w tablicy: jQuery $.when() with variable arguments.