Utilizzo di jquery differito per la sincronizzazione dell'animazione e ajax

Question

Sto cercando di capire l'intero concetto deferred e sto tentando di utilizzarlo per sincronizzare un'animazione fadeIn/fadeOut insieme a una chiamata Ajax.

Fondamentalmente io sono il passaggio dei contenuti a pagina facendo:

1. Recuperare contenuti con ajax
2. sulla risposta FadeOut
3. sostituire il contenuto
4. FadeIn

Tuttavia, se ho capito deferred s right Potrei essere in grado di fare qualcosa del genere:

1. fadeOut, e allo stesso tempo inizializza Fetch contenuti con ajax
2. Quando sia la fadeOut e il contenuto Fetch sono stati compilati: Modificare il contenuto
3. FadeIn

Alcuni codice della soluzione originale:

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

che sto cercando di fare qualcosa di simile:

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

Non riesco proprio a capire come usarlo. E dovrei usare fatto o poi? Dovrei usare pipe in modo intelligente? Ho bisogno di promise?

Quale sarebbe il modo più "standardizzato" per implementarlo?

Answer 1

Quando si utilizza $.when (lo so, frase divertente;)), quindi i valori con cui vengono risolti i promessi vengono passati come argomenti alle funzioni di callback. Cioè nella tua callback done, il primo argomento si riferisce al valore risolto di deferred1 e il secondo argomento a deferred2 (qualunque cosa sia).

Ora, quando un successo callback Ajax si chiama, che viene passato tre argomenti:

• la risposta
• il testo di stato
• l'oggetto jqXHR

si è interessati solo nel primo.

Quindi, con questo, la configurazione dovrebbe essere:

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

hanno anche uno sguardo al $.when documentation.

---

ho bisogno promise?

No. Sembra $.when chiamate .promise internamente quando si passa una raccolta jQuery. Ma in altri casi dovresti farlo, quindi ha senso farlo anche qui, per coerenza (grazie Alnitak).

E dovrei ...? Dovrei ...? Cosa sarebbe ...?

Non esiste una soluzione standard per questo tipo di problemi. Le promesse sono incredibilmente flessibili e ci sono tanti modi di usare. I penso che non siano abbastanza lunghi in JavaScript per i modelli standard da emergere. Trova/crea qualcosa che abbia senso per te ed essere coerente all'interno della tua applicazione.

L'unica cosa che consiglierei di fare se hai più promesse è metterli in un array: jQuery $.when() with variable arguments.