将布尔返回值设置为 jQuery 函数调用

Question

我这里有一个函数可以检查图片的尺寸是否为 100 x 100 像素，如果是则返回 true

function checkDims(url) {
    var valid = $("<img/>").attr("src", url).load(function() {
        s = { w: this.width, h: this.height };
        if (s.w == 100 && s.h == 100) {
            return true;
        }
        else {
            return false;
        }
    });
    return valid;
}

我想设置一个名为 valid 的变量，该变量使用 .load function to get the image size of a remote URL 进行检查，我希望它相应地返回 true 或 false。我知道我将它设置为一个 jQuery 对象，但我想从内部函数中获取结果。

我试过了：

function checkDims(url) {
    var valid;
    $("<img/>").attr("src", url).load(function() {
        s = { w: this.width, h: this.height };
        if (s.w == 100 && s.h == 100) {
            valid = true;
        }
        else {
            valid = false;
        }
    });
    return valid;
}

但是当我调用 checkDims 函数时，它给了我 undefined 作为有效值

所以如果我打电话给

var s = checkDims(a_url)

。它会返回

未定义

Answer 1

您需要将逻辑分解为两个步骤，因为这是一个异步调用。

function checkDims(url, callback) {
    $("<img/>").attr("src", url).load(function() {
        callback (this.width == 100 && this.height == 100);   
    }).on("error") { callback(false); });
}

function nextStep(isValid) {
    alert("The image is " + ((isValid) ? "" : "not ") + "valid"
}

checkDims("foo.gif", nextStep);