如何將jQuery承諾綁定到事件

Question

我想在所有請求完成後才能啓動我的應用程序。如何使用jquery promise方法檢查請求中的所有圖像是否已轉換爲位64，然後啓動應用程序。在此先感謝您的幫助:)

function BuildImageUrl(src) { 
     var dataURL; 
     var img = new Image(); 
     img.src = src; 

     img.onerror = function(err) { 
     console.log(err) 
     }; 

     img.onload = function() { 
     debugger; 
     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL("image/jpg"); 
     return dataURL; 
     }; 

    } 

    OData.defaultHttpClient.enableJsonpCallback = false; 
      OData.read("request url", 
      function (data, request) { 
       debugger; 
       data.results.forEach(function(model,index){ 
       var path = "image path from response; 
       var url = BuildImageUrl(path); 
       }); 
      } 
    ); 

Answer 1

解決方案的第一部分：

您需要BuildImageUrl返回一個承諾使用創建一個延遲對象（「承諾返回一個網址」）方法。當圖像加載事件觸發時，延遲被解析。

function BuildImageUrl(src) { 
    var deferred = $.deferred(); 
    var dataURL; 
    var img = new Image(); 
    img.src = src; 

    img.onerror = function (err) { 
     // On error, reject the result (you may not want this as it will abort all subsequent deferreds) 
     deferred.reject(err) 
    }; 

    img.onload = function() { 
     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL("image/jpg"); 
     // Resolve the deferred to return the result 
     deferred.resolve(dataURL); 
    }; 
    // return the promise to return a dataURL at a later time 
    return deferred.promise(); 
} 

第二部分 - 等待所有deferreds使用$.when完成：

OData.defaultHttpClient.enableJsonpCallback = false; 

// Array to hold all the promise 
var my_array = []; 
OData.read("request url", function (data, request) { 
    debugger; 
    data.results.forEach(function (model, index) { 
     var path = "image path from response; 
     // Add next promise to array 
     my_array.push(BuildImageUrl(path)); 
    }); 
    }); 

// Wait for all promises to complete (or any 1 to fail) 
$.when.apply($, my_array).done(function(){ 
    // Do something when they all complete 
}).fail(function(){ 
    // Do something else if any one of them fails (you probably do not want this) 
});