javascript - 在获取图像大小时绕过异步

Question

我得到图像尺寸(宽度x高度)。图像的位置是 URL。我尝试了类似下面的代码块

var constants: {
       standImgDim: {
           small: '200x200',
           mid: '400x400'
       }
    };

<小时/>

this.getImgDim = function(targetImg) {
        var width=0, height=0, setStyleWidth = 0;
        $("<img/>")
            .attr("src", targetImg)
            .load(function() {
                width = this.width;
                height = this.height;
                var gotDim = width+'x'+height;

                    console.log(gotDim);
            });
   console.log('data');

    };

当前输出:

data
200x200

预期输出:

200x200
data

我知道结果是由于异步行为而产生的......

我也尝试过 $.Deferred.. 但它不起作用。因为我没有使用ajax(如下)

var deferred = new $.Deferred();

 $.ajax({
                    type: "GET",
                    url: targetImg,
                    dataType: "image/jpeg"
                }).done(function(data) {
                    deferred.resolve(data);
                }).fail(function(error) {
                    deferred.reject(error);
                });

                return deferred.promise();

有没有办法以同步方式/其他方式做到这一点？

Answer 1

在加载函数中添加回调:

this.getImgDim = function(targetImg, callback) {
        var width=0, height=0, setStyleWidth = 0;
        $("<img/>")
            .attr("src", targetImg)
            .load(function() {
                width = this.width;
                height = this.height;
                var gotDim = width+'x'+height;

                    console.log(gotDim);

                callback();
            });


    };

this.getImgDim('targetImage', function () {
       console.log('data');
});

唯一的异步函数是.load，因此回调允许的代码是在某种程度上返回到同步上下文，如果您需要访问加载的某些变量或某些输出数据函数，您可以通过回调传递它。

我认为你甚至可以通过以下方式传递上下文:

callback.bind(this);