2017-01-12 3 views
0

Ich habe diesen JavaScript-Code unten aus einer Bibliothek gezupft und verwendet jQuerys Deferred/Versprechungen, die nicht mit der offiziellen Promise-Spezifikation übereinstimmen.Konvertieren eines verzögerten jQuery-Versprechens in ein systemeigenes JavaScript-Versprechen?

Ich würde jede Hilfe bei der einfachen Konvertierung dieses Basisbeispiels in ein natives JavaScript-Versprechen unter Beibehaltung desselben Formats/derselben Struktur zu schätzen wissen.

Fast jedes Beispiel Promise Verwendung finde ich online ist etwas Asynchron zu laden und ich habe einige Fälle, wo ich sie für andere Aufgaben verwenden möchte und dieses Beispiel tut genau das!

  • App.show() heißt
  • App.show() eine Funktion aufruft, die eine PromiseApp.Animations.swipe.apply(this, [current, next, dir]).then(finalize);
  • Das Versprechen Funktion gibt hat eine Event-Handler-Funktion darin, die ausgeführt wird, wenn eine CSS-Animation abgeschlossen ist und dass löst das Versprechen zu lösen.
  • Wenn das Versprechen löst es dann die finalize Funktion, die innerhalb der App.show() Funktion ist.

Es könnte einfacher sein, zu folgen, was es tut, indem Sie einfach auf das Beispiel unten suchen ....

var App = { 

    show: function(index, direction) { 
    var $this = this; 

    // called after Promise is resolved with .then(finalize) 
    finalize = function() { 
     // other code here ran now after promise resolved from App.Animations.swipe().... 
    }; 

    // call function which returns a Promise 
    Animations.swipe.apply(this, [current, next, dir]).then(finalize); 
    }, 


    Animations = { 

    'none': function() { 
     var d = UI.$.Deferred(); 
     d.resolve(); 
     return d.promise(); 
    }, 

    // function returns a Promise which has an event handler inside it that resolves the promise 
    'swipe': function(current, next, dir) { 

     var d = UI.$.Deferred(); 

     next.css('animation-duration', this.options.duration + 'ms'); 

     // Event handler ran one time when CSS Animation ends and triggers the event 
     // this event is what resolves the promise 
     next.css('opacity', 1).one(UI.support.animation.end, function() { 

     current.removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-out' : 'uk-slideshow-swipe-forward-out'); 
     next.css('opacity', '').removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-in' : 'uk-slideshow-swipe-forward-in'); 
     d.resolve(); 

     }.bind(this)); 

     // return a Promise Object when this function is called 
     return d.promise(); 
    }, 
    } 
}; 

auf diesem Code So basiert wie kann es nicht verwenden jQuerys umgewandelt werden Zurückgestellt und verwenden Native JS Promises?

+0

Was für Sie fragen, hier wird nicht empfohlen zurückkehren kann. Native Promises assimilieren jQuery-Versprechungen, aber jQuery-Versprechungen werden native Promises nicht assimilieren. Daher sollten in einer jQuery-Umgebung Low-Level-Promistifikationen wie '.swipe()' ein jQuery-Versprechen zurückgeben, um sicherzustellen, dass es von einer jQuery-Versprechungskette oder 'jQuery.when()' höher im Call-Stack assimiliert wird. Sie werden mit der Rückgabe einer nativen Versprechung fortfahren, solange '.show()' (wie aktuell geschrieben) der einzige Aufrufer ist. Wenn Sie jedoch '.swipe()' an anderer Stelle aufrufen, könnten Sie * in Schwierigkeiten geraten. –

Antwort

1
'none': function() { 
    var d = UI.$.Deferred(); 
    d.resolve(); 
    return d.promise(); 
}, 

Das ist eine einfache

'none': function() { 
    return Promise.resolve(); 
}, 

Jetzt für Swipe:

'swipe': function(current, next, dir) { 
    return new Promise(function(resolve, reject) { 
    next.css('animation-duration', this.options.duration + 'ms'); 

    // Event handler ran one time when CSS Animation ends and triggers the event 
    // this event is what resolves the promise 
    next.css('opacity', 1).one(UI.support.animation.end, function() { 

     current.removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-out' : 'uk-slideshow-swipe-forward-out'); 
     next.css('opacity', '').removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-in' : 'uk-slideshow-swipe-forward-in'); 
     resolve(); 

    }.bind(this)); 
}, 

Ich möchte nur hinzufügen, dass jQuery Promises (oder Deferreds wie sie sie nennen) an einem waren Bühne irgendwie gebrochen, aber in diesen Tagen denke ich, dass sie mit Promise/A + Spezifikation konform sind.

Viele jQuery-Funktionen (Ajax, Animationen zum Beispiel) geben ein Versprechen, oder Sie können .promise() zurückgeben - was die Notwendigkeit für das, was ich in der Antwort getan habe, negiert, und das ist eine Verheißung Konstruktor Anti-Muster verwenden.

Ich bin nicht sicher genug über Ihren Code, wenn eine dieser jQuery Methoden zu kennen, ein Versprechen oder nicht

+0

Perfekt Ich wusste, es war einfach, aber ich war mir nicht sicher. Ich habe hier eine Demo mit einem Click-Ereignis erstellt, um das Versprechen für die zukünftige Referenz https: // jsfiddle zu lösen.net/jasondavis/pjvd39kk/danke – JasonDavis

+0

@JasonDavis - Ich habe gerade einige Kommentare hinzugefügt, die es wert sein könnten, gelesen zu werden –

+0

Danke Ich werde noch einmal über jQuery nachlesen, seit es eine Weile her ist, seit ich den Status von dort überprüft habe. Wie für die Demo ist es nur mit jQuery für einige Click-Ereignisse und Dom Selektoren, nur um das Konzept einer nicht asynchronen Versprechen Verwendung zu bekommen. Einfach experimentieren! Danke für die Hilfe – JasonDavis

Verwandte Themen