Ich habe eine halb komplizierte Kette von Versprechen, die in einer bestimmten Reihenfolge passieren müssen. Eine der Funktionen, die Teil der Versprechungskette ist, ist die Rückgabe des Versprechens, bevor es von einer anderen Funktion gelöst wurde. Beispiel:Jquery .dann nicht warten auf Funktion zu beenden
this.triOverlay = new Image();
this.triOverlayFinal = new Image();
//Start the promise chain for overlay stuff
$.when($.loadImage(this.triOverlay, 'art/small.png'), this.loadAgentImages()).then(function() {
console.log(">>> ALL DONE!!!! <<<<");
});
Loadimage ist eine einfache jQuery-Funktion, die ein aufgeschobenes Objekt baut und setzt sie bis zur Bild Be- und Verarbeitung:
$.loadImage = function (image, url) {
// Define a "worker" function that should eventually resolve or reject the deferred object.
var loadImage = function (deferred) {
image.onload = loaded;
image.onerror = errored; // URL returns 404, etc
image.onabort = errored; // IE may call this if user clicks "Stop"
image.src = url;
function loaded() {
unbindEvents();
console.log(">>>>> resolved image! URL: ");
deferred.resolve(image);
}
function errored() {
unbindEvents();
deferred.reject(image);
}
function unbindEvents() {
// Ensures the event callbacks only get called once.
image.onload = null;
image.onerror = null;
image.onabort = null;
}
};
return $.Deferred(loadImage).promise();
};
Wo es kompliziert ist, dass in dem loadAgentImages habe ich eine anderen Satz von Bildern, die mit einer Klausel geladen werden müssen, die einmal diejenigen geschehen muss geladen werden:
CubePan.prototype.loadAgentImages = function() {
var largePhotoPath = 'someURL'; //Just an example
var smallPhotoPath = 'someURL2'; //Just an example
//This cubePan
var me = this;
return $.when($.loadImage(this.agent.photo, smallPhotoPath), $.loadImage(this.agent.blurAgentPhoto, largePhotoPath)).then(function() {
//return deferred.promise();
console.log(">>>> before start on bluid blur and build TriOverlay <<<<");
return buildBlur(me);
//return blur;
}, function() { console.log(">>>> blur rejected <<<<"); });
};
Die Originalbilder und cal l zu den loadAgentImages befinden sich im selben Objekt. Ich weiß, dass ich das oben nicht erwähnt habe.
Nachdem die beiden Bilder wurden in der aufgelöst, wenn das dann richtig löst und es ruft buildBlur (me):
function buildBlur(me) {
console.log(">>>> buildBlur <<<<");
var blurCanvas = document.createElement('canvas');
var blurCTX = blurCanvas.getContext('2d');
blurCanvas.height = me.agent.blurAgentPhoto.height;
blurCanvas.width = me.agent.blurAgentPhoto.width;
blurCTX.drawImage(me.agent.blurAgentPhoto, 0, 0, blurCanvas.width, blurCanvas.height);
//This function can be found in stackBlur.js
boxBlurCanvasRGBA(blurCanvas, 0, 0, blurCanvas.width, blurCanvas.height, 20);
return $.loadImage(me.agent.blurAgentPhotoFinal, blurCanvas.toDataURL('image/png', 1.0));
};
Allerdings ist BuildBlur nicht das Versprechen zurück, sobald seine seine es Rückkehr gelöst jetzt sofort. Der Rest der Kette wird als aufgelöst betrachtet, obwohl das endgültige Bild (blurAgentPhotoFinal) noch nicht geladen und aufgelöst wurde.
Die $ .loadImage funktioniert in allen Instanzen von oben, nur nicht in der Instanz mit BuildBlur.
Irgendwelche Ideen, warum es nicht darauf wartet, dass die $ .loadImage in buildBlur beendet wird, bevor die Kette vollständig aufgelöst wird?
Danke!