Question

我有一个半复杂的承诺链，需要以某种顺序发生。作为promise链的一部分的函数之一是在从另一个函数解析之前返回promise。例如：

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是一个简单的jQuery函数，它构建一个延迟对象并将其设置为图像加载和处理：

    $.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();
};

变得复杂的是，在loadAgentImages中我有另一组图像需要加载一个在加载后需要发生的子句：

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

原始图像和对loadAgentImages的调用属于同一对象。我知道我没有包含上述内容。

一旦两个图像在何时解析，然后正确触发并调用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));

};

但是，BuildBlur一旦解决了它立即返回它就不会返回它。即使最终图像（blurAgentPhotoFinal）尚未加载和解析，其余的链仍然认为已经解决了。

$ .loadImage适用于上面的所有实例，而不是在buildBlur的实例中。

为什么在完全解析链之前没有等待buildBlur中的$ .loadImage完成的任何想法？

谢谢！

Answer 1

找到问题。代码使用的是非常旧的jquery版本。 1.7。当升级到最新时。然后开始正常工作。

Jquery。然后不等待函数完成

1 个答案: