Verwendung von Jquery aufgeschoben, um Animation und Ajax zu synchronisieren

Question

Ich versuche, meinen Kopf um das ganze deferred Konzept zu bekommen und ich versuche es zu verwenden, um eine fadeIn/ Animation zusammen mit einem Ajax Anruf zu synchronisieren.

Grundsätzlich ist ich Schale Inhalt auf Seite Tun:

1. mit Inhalt Fetch Ajax
2. Auf Antwort Fadeout
3. Inhalt ersetzen
4. FadeIn

Wenn ich aber verstehen deferred s richtig kann ich in der Lage sein, etwas wie das zu tun:

1. fadeOut, und zur gleichen Zeit initialisieren Inhalte mit Ajax-Fetch
2. Wenn sowohl die fadeOut und der Fetch Inhalt vollständig sind: Änderung Inhalt
3. FadeIn

Einige Code der ursprünglichen Lösung:

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

ich versuche, so etwas zu tun:

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

Ich kann nicht wirklich klar darüber, wie man es benutzt. Und sollte ich fertig oder dann verwenden? Soll ich clever Pfeife benutzen? Benötige ich promise?

Was wäre der "standardisierte" Weg, dies zu implementieren?

Answer 1

Wenn Sie $.when (ich weiß, lustiger Satz;)), dann mit dem die Werte die Versprechungen aufgelöst werden, werden als Argumente an die Callback-Funktionen übergeben. I.e. In Ihrem done Callback bezieht sich das erste Argument auf den aufgelösten Wert von deferred1 und das zweite Argument auf deferred2 (was auch immer das ist). Jetzt

, wenn ein Ajax Erfolg Rückruf aufgerufen wird, wird es drei Argumente übergeben:

• die Antwort
• der Statustext
• das jqXHR Objekt

Sie sind nur interessiert in der ersten.

mit diesem So soll Ihr Setup sein:

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

Auch am $.when documentation einen Blick.

---

Muss ich promise brauchen?

Nein. Es sieht wie $.when Aufrufe .promise intern aus, wenn Sie eine jQuery-Auflistung übergeben. Aber in anderen Fällen müssten Sie, so dass es auch hier Sinn macht, aus Gründen der Konsistenz (danke Alnitak).

Und sollte ich ...? Sollte ich ...? Was wäre wenn ...?

Es gibt keine Standardlösung für diese Art von Problemen. Versprechen sind unglaublich flexibel und es gibt so viele Möglichkeiten zu nutzen. I denke, sie sind nicht lange genug in JavaScript für Standardmuster zu entstehen. Finden/erstellen Sie etwas, das für Sie Sinn macht und in Ihrer Anwendung konsistent ist.

Die einzige Sache, die ich empfehlen würde zu tun, wenn Sie mehrere Versprechen haben, ist sie in einem Array zu setzen: jQuery $.when() with variable arguments.