Setting a boolean return value to a jQuery function call

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

load is an asynchronous call, you can not return from an asynchronous call. By the time the true or false is set, the function has already exited. — epascarello
– epascarello, Commented Jun 9, 2015 at 16:15
How would I workaround this. If possible? Do I need a setInterval function to wait? — Jebathon
– Jebathon, Commented Jun 9, 2015 at 16:16
You need to change your logic so that the callback fires off the next step of your process. — epascarello
– epascarello, Commented Jun 9, 2015 at 16:17
@epascarello Then why if I put a console.log within the call it will print? — Jebathon
– Jebathon, Commented Jun 9, 2015 at 16:22
Put it In what call? The load method? Because it that gets fired after the return. — epascarello
– epascarello, Commented Jun 9, 2015 at 16:23

epascarello · Accepted Answer · 2015-06-09 16:21:56Z

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

answered Jun 9, 2015 at 16:21

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jebathon Over a year ago

So the nextStep function should return true or false? if I want to set var result = checkDims("foo.gif",nextStep)?

epascarello Over a year ago

You can not return from this! It is impossible to return from an asynchronous call. You need to break your logic up so what ever you were doing after the call to checkDims needs to be in the function nextStep.

Jebathon Over a year ago

So there is no way to set checkDims to the result of nextStep callback?

Collectives™ on Stack Overflow

Setting a boolean return value to a jQuery function call

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related