jquery。然後不等待功能完成

我有一個半複雜的承諾鏈需要按照一定的順序發生。作爲承諾鏈一部分的功能之一是在它從另一個功能解決之前返回承諾。例如：jquery。然後不等待功能完成

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

的原始圖像和CAL：需要裝載需要發生一次，那些被加載的條款圖像l到loadAgentImages是在同一個對象中。我知道我沒有包括上述內容。

一旦兩個圖像已在得到解決的時候，當時的觸發正確，它調用buildBlur（我）：

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在完全解析鏈之前完成？

謝謝！

來源

2017-07-05 littlevahn

發現問題。該代碼使用了jquery的一個非常舊的版本。 1.7。當升級到最新的。然後開始正常工作。

來源

2017-07-05 22:43:00 littlevahn

jquery。然後不等待功能完成

回答

相關問題