jquery - 从加载函数访问变量

Question

这是一个函数的片段。我正在获取每个图像的原始大小。然后我想做一个简单的 if 语句，但不能访问变量'imageWidth'。在“theImage.onload = function()”之外获取“未定义”。怎么会超出范围？

    var parentWidth = $('figure.pack_image').width();
    var screenImage = $('figure.pack_image img');
    var imageWidth = '';

    screenImage.each(function () {

        var theImage = new Image();
        theImage.src = $(this).attr('src');

        theImage.onload = function() {
            imageWidth = this.width;

        }

        if (imageWidth > parentWidth) {
        ...

Answer 1

它不是“超出范围”，只是还没有价值。在设置之前您无法测试imageWidth它，并且.onload调用是异步的。

您的测试需要在.onload函数内部开始：

theImage.onload = function() {
    imageWidth = this.width;
    if (imageWidth > parentWidth) {
        ...
    }
}

或者，使用延迟回调onload从后续处理中取消嵌套逻辑：

var gotImage = $.Deferred();
theImage.onload = function() {
    gotImage.resolve(this);
}

gotImage.done(function(img)) {
    if (img.width > parentWidth) {
         ...
    }
});