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

Question

I have a function here that checks if a picture has the dimensions of 100 by 100 pixels and if so returns 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;
}

I want to set a variable called valid that checks by using a .load function to get the image size of a remote URL and I want it to return true or false accordingly. I know I'm setting it to a jQuery object but I want to get the results from the inner function.

I tried doing:

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

But it gave me undefined as a value for valid when I called the checkDims function

so if I called

var s = checkDims(a_url)

. It would return

undefined

Answer 1

You need to break up your logic into two steps since this is an asynchronous call.

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