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

第二部分 - 使用$.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)
 });

如何将jquery promise绑定到一个事件

1 个答案: